Как применить стиль css только к PNG изображений?Выделить все изображения PNG
.pngImages {opacity:0.75}
.pngImages:hover {opacity:1}
У меня есть много страниц, которые содержат повторяющиеся PNG файлы. Как можно применить этот класс для всех из них не указать IMG class="pngImage" ...
Вещь как это, но только для PNG изображений:
div {background-color:#ddd}
Вы можете использовать селектор атрибута
img[src$=".png"]
Это выбирает все png изображения
Ссылка: http://www.w3.org/TR/css3-selectors/ Смотрите: 'E [foo $ =" bar "]' –
Только возможная проблема будет что-то вроде '
', если у вас есть маршрутизация на динамический вывод или использование строки запроса для кэширования, или если у вас смешанный случай, например, «PNG» или «Png» (вероятнее всего, существуют более правдоподобные исключения). Правильнее сказать, что он выбирает все изображения, чей 'src' заканчивается точно« .png ». –
Предполагая, что вам нужно только позаботиться о тегах <img>, а не о фоновых изображениях:
img[src$='.png'] {
background-color: #ddd;
}
Это в основном выбирает теги изображений, которые имеют значение атрибута SRC, заканчивающийся в .png
Вы можете использовать селектор [attribute$='value'], чтобы сделать это:
img[src$=".png"] { opacity:0.75; }
img[src$=".png"]:hover { opacity:1; }
Я думаю, что вы должны быть в состоянии сделайте это, используя селектор атрибутов 1, например:
img[src$=".png"]{border:2px solid #8c0000;}
Возможно, вам потребуется протестировать это в Internet Explorer, чтобы убедиться, что он поднят.
Все ваши изображения - png или некоторые из них - gif, jpg и т. Д.? – Nitesh
Есть ли причина, по которой вы не хотите добавлять атрибут класса? – Gevious
Хороший творческий вопрос +1. Но я не думаю, что есть конкретное решение для CSS. - @ user2586454 – Nitesh