CSS에서 이미지 섹션을 반복합니다

Question

그림의 한 부분 (예 : Picure 중간)을 찍고 Div의 배경에서 해당 섹션 만 반복하고 싶습니다. 이것은 원격으로 가능합니까? 나는 이것을 JavaScript로 할 수 있다고 생각하지만 그것은 지저분 할 것입니다.

이론적으로 내 질문에 대한 답변은 그림에서 단일 픽셀을 가져 와서 라인 또는 견고한 배경으로 반복 할 수 있어야합니다.

CSS에서 어떻게 할 수 있는지에 대해 아는 사람이 있습니까?

Answer 1

CSS3을 사용 하여이 효과를 달성 할 수 있습니다. border-image 재산.

불행히도, 나는 CSS2에서 이런 종류의 일을 할 수있는 방법을 알지 못합니다. 또한 Sprites는 이미지의 일부를 늘리지 않기 때문에 CSS 스프라이트를 통해이 작업을 수행 할 수 있다고 생각하지 않습니다. 이미지의 특정 부분을 표시 할 수 있습니다.

스티브

Answer 2

이미지에 따라 여기에 언급 한 것과는 달리 CSS/스프라이트로이를 수행 할 수 있습니다. 그러나 그것이 항상 그런 것은 아닙니다. 반복하려는 이미지, 존재하는 스프라이트와 관련하여 높이/너비, 반복하려는 방향 및 반복하려는 컨테이너의 크기.

_{(원천: sampsonresume.com)}

이 스프라이트는 사이드 바에서 사용하기 위해 왼쪽 100px에서 반복 될 수있는 반면, 다른 부분은 내비게이션에서 버튼 및 롤오버 상태 역할을 할 수 있습니다. 작은 변화로 반복 가능한 부분을 수평으로 만들 수 있습니다.

Answer 3

크로스 브라우저 솔루션을 원한다면 현재 CSS 솔루션을 원한다면 운이 좋지 않습니다.

JavaScript로 수행하는 유일한 방법은 Canvas 요소를 통과하는 것이지만 IE는 지원하지 않습니다.

Answer 4

CSS는 이것을 할 수 없습니다. 그러나 서버 측 또는 SVG 그래픽 또는 플래시를 사용하여 수행 할 수 있습니다. 플러그인으로 수행하는 것은 기술적으로 '배경 이미지 "가되지 않으므로 콘텐츠를 상단에 배치해야합니다.