Wie kann ein CSS-Stil nur auf PNG Bilder anwenden?Wählen Sie alle PNG-Bilder
.pngImages {opacity:0.75}
.pngImages:hover {opacity:1}
Ich habe viele Seiten, die PNG Dateien wiederholt enthalten. Wie kann diese Klasse alle von ihnen gelten ohne img angeben class="pngImage" ...
Ein Ding wie dies aber nur für PNG-Bilder:
div {background-color:#ddd}
Sie das Attribut Selektor verwenden können
img[src$=".png"]
Damit werden alle PNG-Bilder ausgewählt.
Referenz: http://www.w3.org/TR/css3-selectors/ Siehe: 'E [foo $ =" bar "]' –
Nur mögliche Problem wäre etwas wie '
' wenn Sie einige haben Routing zu dynamischer Ausgabe oder Verwendung von Abfragezeichenfolgen für Cache-Busting, oder wenn Sie Groß-/Kleinschreibung wie 'PNG' oder' Png' haben (es gibt wahrscheinlich mehr plausible Ausnahmen). Es ist korrekter zu sagen, dass es alle Bilder auswählt, deren 'src' genau mit' .png' endet. –
Angenommen, Sie müssen nur auf,Tags und nicht auf Hintergrundbilder achten:
img[src$='.png'] {
background-color: #ddd;
}
Dies wählt grundsätzlich Image-Tags, die einen src-Attribut-Wert in .png
Sie endet, haben die [attribute$='value'] Wähler, das zu tun verwenden können:
img[src$=".png"] { opacity:0.75; }
img[src$=".png"]:hover { opacity:1; }
Ich denke, dass Sie in der Lage sein sollten, Verwenden Sie dazu einen Attributselektor 1 zum Beispiel:
img[src$=".png"]{border:2px solid #8c0000;}
Möglicherweise müssen Sie dies in Internet Explorer testen, um sicherzustellen, dass es abgeholt wird.
Alle Ihre Bilder sind PNG oder einige sind gif, jpg, etc.? – Nitesh
Gibt es einen Grund, warum Sie kein Klassenattribut hinzufügen möchten? – Gevious
Gute kreative Frage +1. Aber ich denke nicht, dass es eine spezifische CSS-Lösung gibt. - @ user2586454 – Nitesh