2013-08-07 5 views
6

어떻게 CSS 스타일을 적용 할 수 있습니까 PNG 이미지?모든 PNG 이미지 선택

.pngImages {opacity:0.75} 
.pngImages:hover {opacity:1} 

나는 PNG 파일을 반복 포함 많은 페이지가있다. 없이 지정 그들 모두에게이 클래스를 적용 할 수있는 방법을 IMG class="pngImage" ...

이 좋아하지만 단지 PNG 이미지 일 :

div {background-color:#ddd} 
+0

모든 이미지가 png이거나 일부는 gif, jpg 등입니까? – Nitesh

+0

클래스 속성을 추가하지 않으려는 이유가 있습니까? – Gevious

+0

창의적인 질문 +1. 하지만 특정 CSS 솔루션이 있다고 생각하지 않습니다. - @ user2586454 – Nitesh

답변

6

당신은 속성 선택기를 사용할 수 있습니다

img[src$=".png"] 

그러면 모든 png 이미지가 선택됩니다.

+4

참조 : http://www.w3.org/TR/css3-selectors/ 참조 :'E [foo $ = "bar"]' –

+3

가능한 문제는 ''과 같은 것이 될 수 있습니다. 동적 출력으로 라우팅하거나 캐시 - 버스 팅을 위해 쿼리 문자열을 사용하거나 'PNG'또는 'Png'와 같은 대소 문자가 혼합 된 경우 (아마도 그럴듯한 예외가있을 수 있습니다). 'src '가 정확히'.png'로 끝나는 모든 이미지를 선택한다고 말하는 것이 정확합니다. –

1

배경 이미지가 아닌 <img> 태그 만 처리하면됩니다.

img[src$='.png'] { 
    background-color: #ddd; 
} 

이 기본적으로 당신은이 작업을 수행 할 [attribute$='value'] 선택기를 사용할 수 있습니다 .png

0

에 끝나는 src 속성 값이 이미지 태그를 선택 :

img[src$=".png"] { opacity:0.75; } 
img[src$=".png"]:hover { opacity:1; } 
0

난 당신이 할 수 있어야한다고 생각합니다 예를 들어 속성 ​​선택 자 1을 사용하십시오.

img[src$=".png"]{border:2px solid #8c0000;}

인터넷 익스플로러에서 테스트해야 할 수도 있습니다.