Eine Sammlung möglicher Methoden zum Festlegen von Bildern aus CSS
CSS2 ‚s :afterpseudo-Element oder die neuere Syntax ::aftervon CSS3 zusammen mit der content:Eigenschaft:
Erste W3C-Empfehlung: Cascading Style Sheets, CSS2-Spezifikation der Stufe 2 12. Mai 1998
Letzte W3C-Empfehlung: Selektoren W3C-Empfehlung der Stufe 3 29. September 2011
Diese Methode hängt den Inhalt direkt nach dem Dokumentbauminhalt eines Elements an.
Hinweis: Einige Browser rendern die Eigenschaft experimentellcontent direkt über einige Element-Selektoren, ohne die neueste W3C-Empfehlung zu berücksichtigen, die Folgendes definiert:
Gilt für: :beforeund :afterPseudoelemente
CSS2-Syntax (vorwärtskompatibel):
.myClass:after {
content: url("somepicture.jpg");
}
CSS3-Auswahl:
.myClass::after {
content: url("somepicture.jpg");
}
Standard-Rendering: Originalgröße (hängt nicht von der expliziten Größendeklaration ab)
Diese Spezifikation definiert die Interaktion von: vor und: nach mit ersetzten Elementen (wie IMG in HTML) nicht vollständig. Dies wird in einer zukünftigen Spezifikation genauer definiert.
Aber selbst zum Zeitpunkt dieses Schreibens ist das Verhalten mit einem <IMG>Tag noch nicht definiert, und obwohl es gehackt und nicht standardkonform verwendet werden kann , wird die Verwendung mit <img>nicht empfohlen !
Tolle Kandidatenmethode, siehe Schlussfolgerungen ...
CSS1 -
background-image:Eigenschaft:
Erste W3C-Empfehlung: Cascading Style Sheets, Stufe 1, 17. Dezember 1996
Diese Eigenschaft legt das Hintergrundbild eines Elements fest. Wenn Sie ein Hintergrundbild festlegen, sollten Sie auch eine Hintergrundfarbe festlegen, die verwendet wird, wenn das Bild nicht verfügbar ist. Wenn das Bild verfügbar ist, wird es über die Hintergrundfarbe gelegt.
Diese Eigenschaft gibt es schon seit Beginn von CSS und verdient dennoch eine glorreiche Erwähnung.
Standard-Rendering: Originalgröße (kann nicht skaliert, nur positioniert werden)
Allerdings ist
Die background-size:Eigenschaft von CSS3 wurde verbessert, indem mehrere Skalierungsoptionen zugelassen wurden:
Letzter W3C-Status: Kandidatenempfehlung CSS-Hintergründe und Grenzen Modul Stufe 3 9. September 2014
[length> | <percentage> | auto ]{1,2} | cover | contain
Aber auch bei dieser Eigenschaft hängt es von der Containergröße ab.
Immer noch eine gute Kandidatenmethode, siehe Schlussfolgerungen ...
CSS2 'slist-style: Eigenschaft von zusammen mit display: list-item:
Erste W3C-Empfehlung: Cascading Style Sheets, CSS2-Spezifikation der Stufe 2, 12. Mai 1998
list-style-image: Eigenschaft legt das Bild fest, das als Listenelementmarkierung (Aufzählungszeichen) verwendet wird.
Die Listeneigenschaften beschreiben die grundlegende visuelle Formatierung von Listen: Mit Stylesheets können Sie den Markertyp ( Bild) angeben , Glyphe oder Nummer)
display: list-item- Dieser Wert bewirkt, dass ein Element (z. B. <li>in HTML) ein Hauptblockfeld und ein Markierungsfeld generiert.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Kurzschrift CSS: ( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Standard-Rendering: Originalgröße (hängt nicht von der expliziten Größendeklaration ab)
Beschränkungen:
Durch die Vererbung werden die Werte im Listenstil von OL- und UL-Elementen auf LI-Elemente übertragen. Dies ist die empfohlene Methode zum Angeben von Informationen zum Listenstil.
Sie erlauben Autoren nicht, einen bestimmten Stil (Farben, Schriftarten, Ausrichtung usw.) für die Listenmarkierung anzugeben oder ihre Position anzupassen
Diese Methode ist auch nicht für das <img>Tag geeignet, da die Konvertierung nicht zwischen Elementtypen durchgeführt werden kann eingeschränkte, nicht konforme Hack , der unter Chrome nicht funktioniert.
Gute Kandidatenmethode, siehe Schlussfolgerungen ...
CSS3 - border-image:Eigenschaft Empfehlung :
Letzter W3C-Status: Kandidatenempfehlung CSS-Hintergründe und Grenzen Modul Stufe 3 9. September 2014
Eine Methode vom Hintergrundtyp , die sich auf die Angabe von Größen auf eine ziemlich eigenartige Weise (für diesen Anwendungsfall nicht definiert) und bisherige Fallback-Randeigenschaften (z. B. border: solid) stützt :
Beachten Sie, dass zu Beginn Bilder möglicherweise von einem Vorfahren oder vom Ansichtsfenster abgeschnitten werden, obwohl sie niemals einen Bildlaufmechanismus verursachen.
Dieses Beispiel zeigt das Bild, das nur als Dekoration in der unteren rechten Ecke erstellt wird :
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Gilt für: Alle Elemente außer internen Tabellenelementen, wenn border-collapse: collapse
Trotzdem kann es das Tag eines nicht ändern (aber hier ist ein Hack ), stattdessen können wir es dekorieren:<img>src
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png")
0 100% 100% 0;
}
<img width="300" height="120"
src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg"
class="myClass"
Gute Kandidatenmethode, die nach der Verbreitung von Standards in Betracht gezogen werden muss.
CSS3 ‚s element()Notation Arbeitsentwurf ist eine Erwähnung wert auch:
Hinweis: Die element()Funktion gibt nur das Erscheinungsbild des referenzierten Elements wieder, nicht den tatsächlichen Inhalt und seine Struktur.
<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">
Wir werden die Verwendung gerenderte Inhalte von einem der beiden verborgenen Bildern um das Bild zu ändern Hintergrund in #img1basierend auf der ID - Auswahl über CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Hinweise: Es ist experimentell und funktioniert nur mit dem -mozPräfix in Firefox und nur über backgroundoder background-imageEigenschaften. Außerdem müssen die angegebenen Größen angegeben werden.
Schlussfolgerungen
- Alle semantischen Inhalte oder strukturellen Informationen werden in HTML gespeichert.
- Styling- und Präsentationsinformationen werden in CSS gespeichert.
- Verstecken Sie sich für SEO-Zwecke nicht aussagekräftigen Bilder in CSS.
- Hintergrundgrafiken sind normalerweise beim Drucken deaktiviert.
- Benutzerdefinierte Tags könnten aus CSS verwendet und gestaltet werden, aber primitive Versionen von Internet Explorer verstehen dies nicht] ( IE formatiert keine HTML5-Tags (mit shiv) ) ohne Javascript oder CSS- Anleitung .
- SPAs (Single Page Applications) enthalten normalerweise Bilder im Hintergrund
Lassen Sie uns jedoch HTML-Tags untersuchen, die für die Bildanzeige geeignet sind:
Das <li> Element [HTML4.01 +]
Perfekter Einsatz des list-style-imagemitdisplay: list-item Methode.
Das <li>Element kann leer sein, ermöglicht den Flussinhalt und es ist sogar zulässig, das </li>End-Tag wegzulassen .
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>
Einschränkungen: schwer zu stylen ( width:oder float:helfen)
Das <figure>Element [HTML5 +]
Das Figure-Element stellt einen bestimmten Flussinhalt dar, optional mit einer Beschriftung, die in sich geschlossen ist (wie ein vollständiger Satz) und normalerweise als einzelne Einheit aus dem Hauptfluss des Dokuments referenziert wird.
Das Element ist ohne Inhalt gültig, es wird jedoch empfohlen, a zu enthalten <figcaption>.
Das Element kann somit zum Kommentieren von Abbildungen, Diagrammen, Fotos , Codelisten usw. verwendet werden.
Standard-Rendering: Das Element ist rechtsbündig, mit links und rechts aufgefüllt!
Das <object>Element [HTML4 +]
Um Bilder einzuschließen, können Autoren das OBJECT-Element oder das IMG-Element verwenden.
Das dataAttribut ist erforderlich und kann einen gültigen MIME-Typ als Wert haben!
<object data="data:x-image/x,"></object>
Hinweis: Ein Trick, um das <object>Tag aus CSS zu verwenden, besteht darin, einen benutzerdefinierten gültigen MimeType x-image/xgefolgt von keinen Daten festzulegen (Wert enthält keine Daten nach dem erforderlichen Komma ,).
Standard-Rendering: 300 x 150 Pixel, aber die Größe kann entweder in HTML oder CSS angegeben werden.
Benötigt einen SVG- fähigen Browser und verfügt über ein <image>Element für Rasterbilder
Das <canvas>Element [HTML5 +].
Das widthAttribut ist standardmäßig 300 und das heightAttribut standardmäßig 150 .
Das <input>Element mittype="image"
Einschränkungen:
... wird erwartet, dass das Element wie eine Schaltfläche aussieht, um anzuzeigen, dass es sich bei dem Element um eine Schaltfläche handelt.
welches Chrome folgt und ein leeres 4x4px-Quadrat rendert, wenn kein Text vorhanden ist
Teillösung, eingestellt value=" ":
<input type="image" id="img1" value=" ">
Achten Sie auch auf das bevorstehende <picture>Element in HTML5.1 , derzeit ein funktionierender Entwurf .