it-swarm.com.de

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

Ist es möglich, den Attributwert src in CSS festzulegen? Derzeit 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 mit den Eigenschaften background oder background-image: in CSS.

488
Rakesh Juyal

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"/>

Getestet und funktioniert:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Getestet und funktioniert nicht :

  • FireFox 40.0.2 (Unter Beachtung der Developer Network Tools können Sie feststellen, dass die URL geladen wird, das Bild jedoch nicht angezeigt wird.)
  • Internet Explorer 11.0.9600.17905 (URL wird nie geladen)
811
Pacerier

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 nicht mehr durch die Breite und Höhe sichtbar ist.
  • Dann müssen Sie die Bildgröße durch Auffüllen 'zurücksetzen'. Dieser gibt ein 16x16 Bild. Natürlich können Sie auch links auffüllen/oben auffüllen verwenden, um rechteckige Bilder zu erstellen.
  • Zuletzt wird das neue Bild mit dem Hintergrund dort abgelegt.
  • Wenn das neue Hintergrundbild zu groß oder zu klein ist, empfehle ich die Verwendung von background-size, zum Beispiel: background-size:cover;, wodurch Ihr Bild in den zugewiesenen Bereich passt.

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

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

Genießen!

175
RobAu

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

#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>
25

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 */

}
14
EricG

Sie haben recht. IMG ist ein Inhaltselement und CSS handelt von Design. Aber wie wäre es, wenn Sie einige Inhaltselemente oder Eigenschaften für Entwurfszwecke verwenden? Ich habe IMG über meine Webseiten, die sich ändern müssen, wenn ich den Stil ändere (das CSS).

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

  1. erstelle ein transparentes 1x1 GIF oder PNG.
  2. Weisen Sie dem Image die Eigenschaft "src" des IMG zu.
  3. Definieren Sie die endgültige Präsentation mit "Hintergrundbild" im CSS-Stil.

Es wirkt wie ein Zauber :)

13
Frank

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

Vor-und Nachteile):
(+) funktioniert mit Vektorbildern mit relativer Breite/Höhe (etwas, das RobA 's answer nicht verarbeitet)
(+) ist Cross-Browser (funktioniert auch für IE8 +)
(+) verwendet nur CSS. Das img src muss also nicht geändert werden (oder wenn Sie keinen Zugriff haben/das bereits vorhandene img src-Attribut nicht ändern möchten).
(-) Entschuldigung, es verwendet das Hintergrund-CSS-Attribut :)

10
OviC

Sie können 2 Bilder in Ihrem HTML-Code definieren und mit display: none; entscheiden, welche sichtbar sein sollen.

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

Es steht Ihnen jedoch eine CSS3-Lösung zur Verfügung, die von den Browsern, auf die Sie abzielen, verwendet werden kann. Verwenden Sie content:urlwie in Paceriers Antwort beschrieben . Weitere browserübergreifende Lösungen finden Sie in den folgenden Antworten.

7
cletus

Platzieren Sie mehrere Bilder in einem "steuernden" Container und ändern Sie stattdessen die Containerklasse. Fügen Sie in CSS Regeln hinzu, um die Sichtbarkeit von Bildern in Abhängigkeit von der Containerklasse zu verwalten. Dies hat den gleichen Effekt wie das Ändern der img src -Eigenschaft 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 vorab geladen werden, wie bei CSS backround-images, jedoch nicht wie beim Ändern von img src über JS.

4
Bronx

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

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

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

Soweit mir bekannt ist, KÖNNEN SIE NICHT. CSS handelt von Stil und der Quellcode des Bildes ist Inhalt.

3
NawaMan

Alternativer Weg

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

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

Eine reine CSS-Lösung ist erforderlich, wenn Sie Inhalte von einer anderen Website beziehen und somit keine Kontrolle über das bereitgestellte HTML haben. In meinem Fall versuche ich, das Branding von lizenzierten Quellinhalten zu entfernen, damit der Lizenznehmer nicht für das Unternehmen werben muss, von 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 steht.

{ /* 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);
}
2
Daniel Byrne

Ich weiß, dass dies eine sehr alte Frage ist, aber keine Antwort liefert die richtigen Gründe dafür, warum dies niemals möglich ist. Während Sie tun können, wonach Sie suchen, können Sie es nicht auf eine gültige Weise tun. Um ein gültiges img-Tag zu haben, muss 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 Syntaxstruktur nicht legal ausgeführt werden.

Quelle: W3 Validator

2
Geowil

Oder Sie könnten das 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;
}

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

In einem Projekt, an dem ich gerade arbeite, habe ich eine twig Vorlage für den Heldenblock erstellt

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

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();
});
1
Raul Martin

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.

1

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

$("img.myClass").attr("src", "http://somwhere");
1
Veera

Wenn Sie versuchen, ein Bild basierend auf dem Kontext Ihres Projekts dynamisch in eine Schaltfläche einzufügen, können Sie das? nehmen Sie die Quelle basierend auf einem Ergebnis zu verweisen. In diesem Fall verwende ich mvvm design, damit der Wert von Model.Phases [0] auf der Grundlage des Werts der Lichtphase festlegt, ob auf der Schaltfläche Bilder einer Glühbirne ein- oder ausgeschaltet werden sollen.

Ich bin mir nicht sicher, ob das 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")"/>     
0
Tschlegel

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 ein paar Tage HTML gelernt und wollte wissen, wie das geht. Finde den Hintergrund heraus und setze dann 2 und 2 zusammen. Dies funktioniert zu 100%. Ich habe es überprüft, wenn du nicht sicher bist, dass du die notwendigen Dinge eingibst !!! Wir müssen die Höhe angeben, denn ohne sie gäbe es nichts !!! Ich lasse diese grundlegende Shell, 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");
}

P.S. Ja, ich bin ein Linux-Benutzer;)

0
Reuben Renquist

Jede Methode, die auf background oder background-image basiert, schlägt wahrscheinlich fehl, wenn der Benutzer das Dokument mit druckt "drucken hintergrund Farben und bilder" deaktiviert. Welches ist leider typisch Browser Standard.

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

0
Simon Rozman

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

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