Làm cách nào để áp dụng kiểu css chỉ cho PNG hình ảnh?Chọn tất cả hình ảnh PNG
.pngImages {opacity:0.75}
.pngImages:hover {opacity:1}
Tôi có nhiều trang chứa lặp lại PNG tệp. Làm thế nào có thể áp dụng lớp này để tất cả chúng mà không cần chỉ định img class="pngImage" ...
Một điều như thế này nhưng chỉ dành riêng cho hình ảnh png:
div {background-color:#ddd}
Bạn có thể sử dụng bộ chọn thuộc tính
img[src$=".png"]
Tùy chọn này chọn tất cả hình ảnh png
Tham khảo: http://www.w3.org/TR/css3-selectors/ Xem: 'E [foo $ =" bar "]' –
Chỉ có vấn đề có thể sẽ giống như '
' nếu bạn có định tuyến đến đầu ra động hoặc đang sử dụng chuỗi truy vấn cho bộ nhớ cache-busting hoặc nếu bạn có trường hợp hỗn hợp như 'PNG' hoặc' Png' (có thể có nhiều trường hợp ngoại lệ hợp lý hơn). Sẽ đúng hơn khi nói rằng nó chọn tất cả các hình ảnh có 'src' kết thúc bằng chính xác' .png'. –
Giả sử bạn chỉ cần chăm sóc các thẻ <img> và không phải hình nền:
img[src$='.png'] {
background-color: #ddd;
}
này về cơ bản chọn thẻ hình ảnh có giá trị thuộc tính src kết thúc bằng .png
Bạn có thể sử dụng bộ chọn [attribute$='value'] để làm điều đó:
img[src$=".png"] { opacity:0.75; }
img[src$=".png"]:hover { opacity:1; }
Tôi nghĩ rằng bạn sẽ có thể thực hiện việc này bằng cách sử dụng công cụ chọn thuộc tính 1 ví dụ:
img[src$=".png"]{border:2px solid #8c0000;}
Bạn có thể cần phải kiểm tra điều này trong Internet Explorer để đảm bảo rằng nó được chọn.
Tất cả hình ảnh của bạn là png hoặc một số là gif, jpg, v.v ...? – Nitesh
Có lý do nào bạn không muốn thêm thuộc tính lớp không? – Gevious
Câu hỏi sáng tạo tốt +1. Nhưng tôi không nghĩ rằng có một giải pháp CSS cụ thể cho nó. - @ user2586454 – Nitesh