배경 이미지에 스타일을 적용하는 트릭이 있습니까?

Question

CSS 어떤 태그 나 HTML을 추가하지 않고

#lego{ 
    background: url(images/lego.png) no-repeat center bottom ; 
} 

HTML

<div id="lego"></div> 

.

자바 스크립트 없음.

레고는 100 % 너비이지만 이미지는 그렇지 않습니다.

box-shadow (또는 다른 스타일링)을 이미지에만 적용하는 방법 (100 % 너비의 레고 요소가 아닌).

Answer 1

그냥 :before 요소에게 그림자를 줄 수 있지만 수 있도록 당신이 당신의 이미지를 포함하는 CSS를 pseudo :before or :after elements을 사용할 수 있습니다 lego div. 이 바이올린 확인 - http://jsfiddle.net/cNeWW/

#lego{ 
    width: 100%; 
    position: relative; 
} 

#lego:before{ 
    content: ""; 
    background: url(images/lego.png) no-repeat center bottom; 
    position: absolute; 
    width: <background width>; 
    height: <background height>; 
    display: block; 
    box-shadow: 5px 5px 3px #000; 
} 

Answer 2

아니요. 실제 이미지에 그림자를 추가하십시오.

편집 : CSS3에서는 여러 배경을 사용할 수 있으므로 그로 인해 까다로울 수 있습니다.

http://www.css3.info/preview/multiple-backgrounds/

Answer 3

요소의 배경 이미지 이미지 스타일을 할 수있는 방법이 없습니다. 배경 이미지는 요소 스타일의 일부입니다.

위치 및 상자 그림자를 사용하여 <img> 태그를 사용하거나 Photoshop 또는 다른 이미지 편집 프로그램에서 이미지 자체에 그림자를 추가 할 수 있습니다.

이 작업을 수행 할 수 없습니다.

Answer 4

수 없습니다. CSS 스타일은 DOM 요소에 적용되며 배경 이미지는 DOM 요소가 아닙니다. 당신이 뭔가를 할 수 있습니다

CSS :

#lego .image { 
    background: url(images/lego.png) no-repeat center bottom ; 
    width: <image_width>; 
    height: <image_height>; 
    box-shadow: ... 
    ... 
} 

HTML :

<div id="lego"> 
    <div class="image"></div> 
</div> 

Answer 5

을 그게 가능하지 않다 생각합니다. CSS는 HTML 요소 만 스타일을 지정할 수 있으며 배경 이미지는 요소가 아닙니다. 그러나 이미지 자체에 그림자를 추가하거나 (Photoshop 또는 Sth를 사용하여) #logo:after을 사용하고 그걸 가지고 놀아 볼 수도 있습니다. 의도 한대로 할 수 있습니다.