CSS3를 사용하여 배경 이미지의 일부만 표시

Question

CSS3를 사용할 때 배경 이미지의 일부만 표시 할 수 있습니까? 이미지를 배경으로 사용하고 싶지만 그 중 절반 만 보여주기 때문에 배경 이미지를 정의 할 수있는 마스크와 같은 것이 있습니까?

Answer 1

"clip-path", "mask"및 "filter"(IE "필터"가 아니라 SVG "필터"가 아니라)는 Firefox 및 Safari (예 Chrome은 없음)에서만 작동합니다. 그리고 그들은 그것을 다르게합니다. 사파리 단지에서 clippath 만들 모양 자체를 사용하는 반면

.box { clip-path: url("roundedrect.svg#cp1"); } 

: 파이어 폭스는 ID의 예를 통해 지정된 SVG의 clippath을 필요로 내가 아직

.box { clip-path: url("roundedrect.svg"); } 

오페라에서 할 수있는 방법을 발견하고, 크롬.

하지만 FF와 Safari의 경우 "크로스 브라우저"예제에서는 http://tokimon.dk/testing/css-svg-test.html을 생성했습니다.

그렇지 않으면 어쩌면 당신은 CSS 3의 배경 조작의 무언가를 얻을 수 있습니다 : 오페라에서 만 그 효과를 할 수있는 XHTML 페이지에서 인라인 SVG를 사용할 수 있습니다 http://www.css3.info/preview/

Answer 2

이 시도 :

body { 
    background-image: url('top.jpg'), 
         url('middle.jpg'), 
         url('bottom.jpg'); 
} 

Answer 3

웹킷은 이제 마스크로 사용할 수 있습니다 CSS SVG 이미지에 알파 마스크를 지원합니다. 예를 들어 부분적으로 투명한 원입니다.

-webkit-mask-image : url (circle.svg); 이 도움이

http://webkit.org/blog/181/css-masks/

희망.

Answer 4

. SVG 안에 이미지를 집어 넣고 마스크를 정의한 다음 <use xlink:href="#image" mask="url(#yourmask)"/>을 실행하여 효과를 얻으십시오.