Ist es möglich, das Äquivalent eines src-Attributs eines img-Tags in CSS festzulegen?

532

Ist es möglich, den srcAttributwert in CSS festzulegen? Zur Zeit mache ich Folgendes:

<img src="pathTo/myImage.jpg"/>

und ich möchte, dass es so etwas ist

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

Ich möchte dies tun, ohne die Eigenschaften backgroundoder background-image:in CSS zu verwenden.

html css image Rakesh Juyal
quelle
1
Dies wird anscheinend in CSS3 möglich sein: w3.org/TR/css3-values/#attribute
graphicdivine
7
Es ist jetzt möglich. Getestet auf Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
Pacerier
2
Aber FireFox 30.0, Internet Explorer 11.0 unterstützt nicht
Laxmikant Dange
Diese reine CSS-Lösung funktionierte für mich (in allen Browsern): stackoverflow.com/a/19114098/448816 , mit der Ausnahme, dass ich hinzufügen musste: 'Hintergrundgröße: 100%;'.
mikhail-t
(2020) Sie können dies mit JS tun, getPropertyValue("--src")siehe: jsfiddle.net/CustomElementsExamples/vjfpu3a2
Danny '365CSI' Engelman

Antworten:

881

Verwenden Sie content:url("image.jpg").

Voll funktionsfähige Lösung ( Live Demo):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>
Erweitern Sie das Snippet

Getestet und funktionsfähig:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Geprüft und nicht arbeiten:

  • FireFox 40.0.2 (Wenn Sie die Developer Network Tools beachten, können Sie sehen, dass die URL geladen wird, das Bild jedoch nicht angezeigt wird.)
  • Internet Explorer 11.0.9600.17905 (URL wird nie geladen)
Pacerier
quelle
7
@gotqn, bisher nur Chrome Safari Opera.
Pacerier
36
@EricG, unterschiedliche Anwendungen haben unterschiedliche Anforderungen. Wenn es nicht Ihren Anforderungen entspricht, verwenden Sie es nicht. Wenn ja, verwenden Sie es.
Pacerier
4
Nicht funktionieren IE10 ist ein No-Go. Wir lassen IE7 fallen (lassen Sie uns nicht über IE6 sprechen). Bei Bedarf auch IE8. Aber IE9 - IE10 ... nein.
Rolf
11
Worth hinzufügen , dass auch in Browsern , die Unterstützung Zuweisung contentan img, es sein Verhalten ändert. Das Bild beginnt, Größenattribute zu ignorieren, und in Chrome / Safari verliert es die Kontextmenüoptionen wie "Bild speichern". Dies liegt daran, dass das Zuweisen eines contenteffektiv imgvon einem leeren ersetzten Element zu etwas konvertiert <span><img></span>.
Ilya Streltsyn
3
Ohne ordnungsgemäße Browserunterstützung sehe ich dies leider nicht als gültige Antwort.
Emachine
183

Es gibt eine Lösung, die ich heute herausgefunden habe (funktioniert in IE6 +, FF, Opera, Chrome):

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Wie es funktioniert:

  • Das Bild wird verkleinert, bis es durch Breite und Höhe nicht mehr sichtbar ist.
  • Dann müssen Sie die Bildgröße durch Auffüllen zurücksetzen. Dieser gibt ein 16x16 Bild. Natürlich können Sie mit padding-left / padding-top rechteckige Bilder erstellen.
  • Schließlich wird das neue Bild dort im Hintergrund abgelegt.
  • Wenn das neue Hintergrundbild zu groß oder zu klein ist, empfehle ich background-sizebeispielsweise background-size:cover;Folgendes : Passt Ihr Bild in den zugewiesenen Bereich.

Es funktioniert auch für Submit-Input-Bilder, sie bleiben anklickbar.

Siehe Live-Demo: http://www.audenaerde.org/csstricks.html#imagereplacecss

Genießen!

RobAu
quelle
6
@ RobAnu: Das funktioniert ganz gut - jsfiddle
TimPietrusky
9
Ich muss Ihnen sagen, dass dies faszinierend und klug ist, aber ein leerer DIV ist einfacher.
Volomike
11
In diesem Fall ist es. Es gibt jedoch Fälle, in denen Sie den HTML-Code nicht steuern können und den IMG dennoch bearbeiten möchten. Dort wird diese Lösung auch funktionieren
RobAu
2
Wenn das Bild ein srcAttribut hat, ist dies die Technik, die Sie benötigen. +1 - hat mir sehr geholfen
James Long
3
Nicht auf dieser Antwort rangieren, was für einige Anwendungen die Lösung sein könnte, aber diese Methode hat eine Einschränkung. Sie haben keine Kontrolle über die Abmessungen des Renderns der Bilddatei. Bei normaler Verwendung können Sie die Höhe und Breite eines Bildes steuern, wenn die Datei in der Quelle angegeben ist. Dies unterscheidet sich jedoch im Grunde nicht von einem Div mit einem Hintergrundbild. Wenn Ihr Div größer als das Bild ist, haben Sie kein Glück.
TARKUS
113

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

Code-Snippet anzeigen

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

  1. Alle semantischen Inhalte oder strukturellen Informationen werden in HTML gespeichert.
  2. Styling- und Präsentationsinformationen werden in CSS gespeichert.
  3. Verstecken Sie sich für SEO-Zwecke nicht aussagekräftigen Bilder in CSS.
  4. Hintergrundgrafiken sind normalerweise beim Drucken deaktiviert.
  5. 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 .
  6. 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 .

Code-Snippet anzeigen

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.

Das <SVG>Tag

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 .

CSᵠ
quelle
(2020) Verwenden Sie CSS-Eigenschaften: stackoverflow.com/questions/2182716/…
Danny '365CSI' Engelman
Gute Antwort, zeigt aber das völlige Versagen des Webs als Plattform für die Bereitstellung grundlegender Grundelemente.
Serraosays
26

Ich habe die leere Div-Lösung mit diesem CSS verwendet:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML:

<div id="throbber"></div>
Emmanuel Touzery
quelle
Was ist, wenn ich es inline anzeigen möchte? Das Hinzufügen von "display: inline" ergibt meine div-Dimension von 0x0 ...
elsurudo
1
@elsurudo Verwenden Sie display: inline-block, wenn Sie eine Breite und Höhe für ein Inline-Element festlegen möchten
Erin Drummond
1
Die Top-Antwort funktioniert nicht mit Firefox, daher gefällt mir Ihre Antwort besser! Und es ist klar und hat keine CSS-Hacks.
Sergey Bogdanov
Wenn Sie mehr als ein Bild anzeigen müssen, denken Sie daran, dass das ID-Feld technisch eindeutig sein soll. Daher ist die Verwendung eines CSS-Klassen-Selektors anstelle der ID ideal.
mix3d
Bilder dieses Typs werden nicht richtig gedruckt, wenn die Hintergrundgrafiken in den Druckeinstellungen deaktiviert sind.
posfan12
14

Ich habe einen besseren Weg gefunden als die vorgeschlagenen Lösungen, aber es wird tatsächlich das Hintergrundbild verwendet. Konforme Methode (kann für IE6 nicht bestätigt werden) Credits: http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

Das CSS:

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

Das alte Bild wird nicht gesehen und das neue wird wie erwartet gesehen.


Die folgende saubere Lösung funktioniert nur für das Webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}
EricG
quelle
Dies ist ein ordentlicher Trick, aber ist er wirklich standardkonform? Auf der W3C-Seite wird angegeben, dass die contentEigenschaft nur für die Klassen :beforeund :afterpseudo gilt. Wenn Sie IE7 oder früher unterstützen müssen, gibt es meines Erachtens keine Unterstützung content. Trotzdem sehr verlockend.
Jatrim
Sie haben Recht, ich habe gerade eine konformere Methode gefunden. Meinen Beitrag aktualisieren! Jetzt stimme mich ab;) Haha.
EricG
Der aktualisierte Ansatz ist definitiv besser als der, der sich auf Inhalte stützt. Vielen Dank für die Aufnahme des ursprünglichen Links. Das war aufschlussreich. Sie werden feststellen, dass die Antwort von @ RobAu auch Ihrer aktualisierten Version sehr ähnlich ist.
Jatrim
1
@jatrim Die contentEigenschaft gilt für alle Elemente. http://www.w3.org/TR/css3-content/#content
XP1
13

Sie haben recht. IMG ist ein Inhaltselement und bei CSS geht es um Design. Aber wie wäre es, wenn Sie einige Inhaltselemente oder Eigenschaften für Designzwecke verwenden? Ich habe IMG auf meinen Webseiten, die sich ändern müssen, wenn ich den Stil (das CSS) ändere.

Nun, dies ist eine Lösung zum Definieren der IMG-Präsentation (nicht wirklich das Bild) im CSS-Stil.

  1. Erstellen Sie ein 1x1 transparentes GIF oder PNG.
  2. Weisen Sie diesem Bild die Eigenschaft "src" von IMG zu.
  3. Definieren Sie die endgültige Präsentation mit "Hintergrundbild" im CSS-Stil.

Es wirkt wie ein Zauber :)

Frank
quelle
5
-1 Auch wenn Ihre Antwort nicht schlecht ist, erwähnt er ausdrücklich, dass er nicht verwenden möchtebackground*
Fresskoma
1
Dies ist ein Trick ... meiner Meinung nach werden Tricks von Browsern geändert ... und eines Tages am Morgen werden Sie eine Hölle auf Ihrer Website sehen: D :)))
Mahdi Jazini
11

Hier ist eine sehr gute Lösung -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro (s) und Con (s):
(+) funktioniert mit Vektor Bild , die relative Breite / Höhe (eine Sache , die haben Robau ‚s Antwort nicht behandelt)
(+) ist Cross - Browser (funktioniert auch für IE8 +)
(+) verwendet es nur CSS. Sie müssen das img src also nicht ändern (oder wenn Sie keinen Zugriff haben / das bereits vorhandene img src-Attribut nicht ändern möchten).
(-) Entschuldigung, es wird das Hintergrund-CSS-Attribut verwendet :)

OviC
quelle
Nun, das ist die richtige Lösung, funktioniert für mich in allen Browsern, danke !! Erwähnenswert ist auch, dass ich hinzufügen musste: Hintergrundgröße: 100%; zur CSS-Klasse in der obigen Lösung, damit das Ersatzbild richtig angezeigt wird.
mikhail-t
9

Sie können 2 Bilder in Ihrem HTML-Code definieren und display: none;damit entscheiden, welches sichtbar sein soll.

Kostas Andrianopoulos
quelle
Ich suchte weit und breit nach einer Lösung, die Web Responsive war, aber auch SEO aufrechterhielt. Ich wollte Medienabfragen in CSS verwenden, um mein Bild je nach verwendetem Gerät zu ändern, aber ich wollte meinen Inhalt in HTML behalten. Das Deklarieren von Quellen in CSS war ein Weg, den ich nicht einschlagen wollte, daher background-imagewar dies keine Option. Ich wollte imgTags für SEO-Zwecke. Ihre Antwort ist so einfach, elegant und löst alle meine Hürden! Bravo! Außerdem muss der Benutzer nicht beide Bilder herunterladen. Außerdem kann ich beliebig viele Bilder hinzufügen.
Xavier
Jede Antwort, die ich bisher gelesen habe, würde mich zwingen, entweder meine Quellen in meinem Stylesheet zu deklarieren oder Inline-CSS in meinem Markup zu verwenden. Beides hat mir nicht gefallen. Unordentlicher Code!
Xavier
7

Nein, Sie können das Attribut image src nicht über CSS festlegen. Der nächste, den Sie bekommen können, ist, wie Sie sagen, backgroundoder background-image. Ich würde das sowieso nicht empfehlen, da es etwas unlogisch wäre.

Es steht Ihnen jedoch eine CSS3-Lösung zur Verfügung, wenn die Browser, auf die Sie abzielen, diese verwenden können. Verwenden Sie content:url wie in Paceriers Antwort beschrieben . Weitere browserübergreifende Lösungen finden Sie in den anderen Antworten unten.

Cletus
quelle
1
Warum die Abwahl? Diese Antwort ist genauer als die akzeptierte Antwort.
Harsimranb
1
Die bisher beste Antwort: NEIN, mit CSS geht das nicht.
Milche Patern
4

Fügen Sie mehrere Bilder in einen "steuernden" Container ein und ändern Sie stattdessen die Klasse des Containers. Fügen Sie in CSS Regeln hinzu, um die Sichtbarkeit von Bildern abhängig von der Klasse des Containers zu verwalten. Dies hat den gleichen Effekt wie das Ändernimg src Eigenschaften eines einzelnen Bildes.

HTML:

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

Beachten Sie, dass alle Bilder vorgeladen werden, wie bei CSS backround-image, jedoch im Gegensatz zum Ändern img srcüber JS.

Bronx
quelle
3

Alternativer Weg

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Tukaz
quelle
3

Einige Daten würde ich in HTML belassen, aber es ist besser, den src in CSS zu definieren :

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}
Renat Gatin
quelle
2

Soweit mir bekannt ist, können Sie nicht. Bei CSS geht es um Stil und die src des Bildes ist Inhalt.

NawaMan
quelle
3
Heutzutage sind Bilder oft nur dazu da, die Seite zu stylen.
Lorenzo Polidori
2
Die Implikation ist, dass es einen Unterschied zwischen Bildern geben kann, die als Rahmen, Hintergründe usw. verwendet werden, und solchen, die tatsächlich Teil des Seiteninhalts sind, d. H. Diagramme, Artikelfotos usw.
Rhys van der Waerden
1
SIE KÖNNEN, und es gibt häufig gültige Fälle, in denen Sie möchten.
Ryan0
2

Eine vorherige Lösung zu wiederholen und die reine CSS-Implementierung hier hervorzuheben, ist meine Antwort.

Eine reine CSS-Lösung ist erforderlich, wenn Sie Inhalte von einer anderen Website beziehen und daher keine Kontrolle über den bereitgestellten HTML-Code haben. In meinem Fall versuche ich, das Branding von lizenzierten Quellinhalten zu entfernen, damit der Lizenznehmer nicht für das Unternehmen werben muss, bei dem er die Inhalte kauft. Deshalb entferne ich ihr Logo, während ich alles andere behalte. Ich sollte beachten, dass dies im Vertrag meines Kunden liegt.

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
Daniel Byrne
quelle
2

Ich weiß, dass dies eine wirklich alte Frage ist, aber keine Antworten liefern die richtige Begründung dafür, warum dies niemals möglich ist. Während Sie "tun" können, wonach Sie suchen, können Sie es nicht auf gültige Weise tun. Um ein gültiges img-Tag zu haben, muss es es die Attribute src und alt haben.

Alle Antworten, die eine Möglichkeit bieten, dies mit einem img-Tag zu tun, das das src-Attribut nicht verwendet, fördern die Verwendung von ungültigem Code.

Kurz gesagt: Was Sie suchen, kann innerhalb der Struktur der Syntax nicht legal ausgeführt werden.

Quelle: W3-Validator

Geowil
quelle
2

Oder Sie könnten dies tun, was ich auf dem Interweb-Ding gefunden habe.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">
.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

So verstecken Sie das Bild effektiv und füllen den Hintergrund auf. Oh, was für ein Hack, aber wenn Sie ein IMG-Tag mit Alternativtext und einem Hintergrund möchten, der ohne Verwendung von JavaScript skaliert werden kann?

In einem Projekt, an dem ich gerade arbeite, habe ich eine Heldenblock-Zweigvorlage erstellt

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
Pocketninja
quelle
1

Wenn Sie keine Hintergrundeigenschaft festlegen möchten, können Sie das src-Attribut eines Bildes nicht nur mit CSS festlegen.

Alternativ können Sie JavaScript verwenden, um so etwas zu tun.

Guillaume Flandre
quelle
1

Mit CSS ist dies nicht möglich. Wenn Sie jedoch JQuery verwenden, reicht Folgendes aus:

$("img.myClass").attr("src", "http://somwhere");
Veera
quelle
tatsächlich kann es)) die Antwort auf dieselbe Frage hier sehen: stackoverflow.com/questions/2182716/…
mikhail-t
1

Sie können es mit JS konvertieren:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});
Raul Martin
quelle
0

Wenn Sie versuchen, ein Bild dynamisch basierend auf dem Kontext Ihres Projekts in eine Schaltfläche einzufügen, können Sie das? Nehmen Sie die Referenz basierend auf einem Ergebnis. Hier verwende ich mvvm design, um meinen Model.Phases [0] -Wert bestimmen zu lassen, ob meine Schaltfläche basierend auf dem Wert der Lichtphase mit Bildern einer Glühbirne gefüllt werden soll.

Ich bin mir nicht sicher, ob dies hilft. Ich verwende JqueryUI, Blueprint und CSS. Die Klassendefinition sollte es Ihnen ermöglichen, die Schaltfläche nach Ihren Wünschen zu gestalten.

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

Tschlegel
quelle
0

Ich würde dies hinzufügen: Hintergrundbild könnte auch mit background-position: x y;(x horizontal y vertikal) positioniert werden . (..) Mein Fall, CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)
John
quelle
0

HTML Quelltext: 

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

CSS-Code:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

Ich habe nach der Schule einige Tage lang HTML gelernt und wollte wissen, wie das geht. Fand den Hintergrund heraus und setzte dann 2 und 2 zusammen. Dies funktioniert zu 100%. Ich habe es überprüft. Wenn nicht, stellen Sie sicher, dass Sie die erforderlichen Dinge ausfüllen !!! Wir müssen die Höhe angeben, denn ohne sie gäbe es nichts !!! Ich werde diese grundlegende Shell verlassen, die Sie hinzufügen können.

Beispiel:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/[email protected]");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

PS Ja, ich bin ein Linux-Benutzer;)

Z_Doctor
quelle
0

Jede Methode, die auf dem Dokument basiert backgroundoder background-imagewahrscheinlich fehlschlägt, wenn das Dokument mit deaktivierter Option " Hintergrundfarben und Bilder drucken" gedruckt wird . Welches ist leider typische Browser-Standardeinstellung.

Die einzige druckfreundliche und browserübergreifende Methode ist die von Bronx vorgeschlagene.

Simon Rozman
quelle
0

Laden von IMG src aus der CSS-Definition mithilfe moderner CSS-Eigenschaften

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img)	// compute style for img
      .getPropertyValue("--src")		// get css property
      .replace(/[" ]/g, "");				// strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>
Erweitern Sie das Snippet

  • Die leere srcDefinition auf einem <IMG> löst die Funktion onerror handler: loadIMG aus
  • Die Funktion loadIMG berechnet den CSS-Wert
  • entfernt alle illegalen Zeichen
  • legt die IMG.src fest
  • Wenn sich das CSS ändert, wird das Bild NICHT aktualisiert! Sie müssen loadIMG erneut aufrufen

JSFiddle: https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

Verwandte SO-Antworten: WCPROPS

Danny '365CSI' Engelman
quelle
-3

Verwenden Sie einfach HTML5 :) 

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
Max
quelle
Das OP versucht speziell, sein HTML-Markup mit einer CSS-Lösung zu bereinigen. Diese Antwort würde das Markup nur noch weiter durcheinander bringen.
Webaholik