대각선으로 줄무늬가있는 배경에 비례하여 내용 영역이있는 페이지를 디자인하고 있습니다.패턴이있는 배경에 그림자가있는 div를 스케일링 - 솔루션?
내용 영역 div은 콘텐츠와 수직으로 조정되는 고정 너비입니다. 테두리가 그림자이기 때문에 페이지 배경 이미지와 일직선 상에 반복되는 배경 이미지 (40px 너비 × 80px 높이)가 있습니다. 반복되는 배경이 서로 일치하도록 div을 80px 높이 배율로 조정해야합니다.
컨텐츠 영역 div을 항상 80px의 배수로 표시하도록 확장 할 수있는 우아한 솔루션이 있습니까? 그렇지 않다면 div을 80px의 배수로 조정하지 않고이 문제를 해결할 수있는 또 다른 방법이 있습니까?
미리 감사드립니다.
라이언
콘텐츠 영역에서 박탈 된 배경을 버리고 드롭 그림자를 사용할 이미지에 투명한 PNG를 사용하지 않는 이유는 무엇입니까? 이미 CSS 문제를 해결하기 위해 자바 스크립트를 사용하려고하기 때문에 DD_belatedPNG을 사용하면 IE6에서 알파 투명도가 올바르게 표시됩니다.
당신이 절대적으로 이전 버전의 브라우저에 표시 그림자를 필요로하지 않는 대신 이미지를 사용하는 CSS3 box-shadow 속성을 생성 할 수 있습니다. 이것은 그림자가 브라우저에 의해 생성되고 상황이 어떻게 정렬되어 있는지에 관계없이 백그라운드에서 멋지게 떨어지게되므로 훨씬 더 융통성이 있습니다.
글쎄, 그 속성이 내가 원하는 것을 할 것이라고 확신하지 않습니다. . 원할 경우, 내가 무엇을 다루고 있는지 살펴 보시지 않으시겠습니까? http://www.prettysmartstudios.com/psstest/web.html 고마워요! –
이 페이지에 http://www.bloggingcss.com/en/tutorials/css3-box-shadow-property/가 나와 있기 때문에 box-shadow는 아직 광범위하게 지원되지 않으므로 많은 사용자가 볼 수 없습니다. –
예, 브라우저 호환성은 또 다른 걱정거리입니다. Marcel에게 감사드립니다. –
지미의 생각은 견고합니다. 브라우저가이 CSS 속성을 지원한다고 가정합니다. 또 다른 고려해야 할 더 이상한 아이디어는 jquery가 위치를 고정하고 DOM과 콘텐츠 div 뒤에 오프셋을 넣는 DOM에 div를 삽입하도록하는 것일 수 있습니다. 그렇다면이 새로운 under-div 불투명도 (fadeTo을 사용할 수 있지만 더 좋은 점이있을 수 있습니다). 기본적으로 콘텐츠 div에 50 % 불투명도 아래에 동일한 크기의 div가 있으면 실제 그림자를줍니다.
피드백에 감사드립니다, 안토니. 그것은 흥미로운 아이디어입니다. 확실히 기억해 두어야 할 트릭입니다. –
당신이 이기면, 이안. 나는 이것이 가장 간단한 해결책이라고 생각한다. JS 수정 정보를 주셔서 감사합니다. 건배! –