Jest rozwiązanie, które dziś odkryłem (działa w IE6+, FF, Opera, Chrome):

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

Jak to działa:

• obraz jest zmniejszany, dopóki nie będzie widoczny przez szerokość i wysokość.
• Następnie musisz "zresetować" Rozmiar obrazu za pomocą wypełnienia. To jeden daje obraz 16x16. Oczywiście możesz użyć padding-left / padding-top do tworzenia prostokątnych obrazów.
• na koniec, nowy obraz jest tam umieszczany za pomocą tła.
• Jeśli nowy obraz tła jest zbyt duży lub zbyt mały, polecam użycie background-size na przykład: background-size:cover;, który pasuje do Twojego obrazu w przydzielonej przestrzeni.

Działa również dla submit-input-images, pozostają klikalne.

Zobacz demo na żywo: http://www.audenaerde.org/csstricks.html#imagereplacecss

Zbiór możliwych metod ustawiania obrazów z CSS

CSS2 ' s :after pseudo-element lub składnia nowsza ::after z CSS3 wraz z content: własność:

_{pierwsza rekomendacja W3C: kaskadowe arkusze stylów, poziom 2 Specyfikacja CSS2 12 maj 1998}
^{Ostatnia rekomendacja W3C: selektory poziomu 3 Rekomendacja W3C 29 Wrzesień 2011}

Ta metoda dołącza zawartość tylko po zawartości drzewa dokumentu elementu.

Uwaga: Niektóre przeglądarki eksperymentalnie renderują właściwość content bezpośrednio nad niektóre selektory elementów pomijając nawet najnowsze zalecenie W3C, które definiuje:

Dotyczy: :before i :after pseudoelementów

Składnia CSS2 (forward-compatible):

.myClass:after {
  content: url("somepicture.jpg");
}

Selektor CSS3:

.myClass::after {
  content: url("somepicture.jpg");
}

Domyślne renderowanie: oryginalny rozmiar (nie zależy od jawnej deklaracji rozmiaru)

Ta specyfikacja nie definiuje w pełni interakcji :before I: after z wymienionymi elementami (takimi jak IMG w HTML). Zostanie to zdefiniowane bardziej szczegółowo w przyszłej specyfikacji.

Ale nawet w momencie pisania tego tekstu zachowanie ze znacznikiem <IMG> nadal nie jest zdefiniowane i chociaż można go użyć w sposób zhakowany i niezgodny ze standardami, stosowanie z <img> Nie jest zalecane!

^{pierwsza rekomendacja W3C: kaskadowe arkusze stylów, poziom 1 17 Dec 1996}

Ta Właściwość ustawia obraz tła elementu. Ustawiając obraz tła, należy Ustaw również kolor tła, który będzie używany, gdy obraz jest niedostępny. Gdy obraz jest dostępny, jest nakładany na kolor tła.

Ta właściwość istnieje od początku CSS i mimo to zasługuje na chwalebną wzmiankę.

.myClass {
    display: list-item;
    list-style-position: inside;
    list-style-image: url("someimage.jpg");
}

.myClass {
    display: list-item;
    list-style: square inside url("someimage.jpg");
}

.myClass {
    border: solid;
    border-width: 0 480px 320px 0;
    border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}

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

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

#img1 {
    width: 480px; 
    height: 320px; 
    background: -moz-element(#pic1) no-repeat;
    background-size: 100% 100%;
}

.hide {display: none}

.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>

<object data="data:x-image/x,"></object>

<input type="image" id="img1" value=" ">

Użyłem pustego rozwiązania div, z tym 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>

Znalazłem lepszy sposób niż proponowane rozwiązania, ale rzeczywiście wykorzystuje obraz tła. Metoda zgodna (nie można potwierdzić dla IE6) Kredyty: http://www.kryogenix.org/code/browser/lir/

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

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;
}

Stary obraz nie jest widoczny, a nowy jest postrzegany zgodnie z oczekiwaniami.

poniższe rozwiązanie działa tylko dla webkit

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

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

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

}

Mają rację. IMG jest elementem treści, a CSS jest o projektowaniu. Ale co powiesz na to, gdy używasz niektórych elementów zawartości lub właściwości do celów projektowych? Mam IMG na moich stronach internetowych, które muszą się zmienić, jeśli zmienię styl (CSS).

Otóż jest to rozwiązanie do definiowania prezentacji IMG (tak naprawdę nie obrazka) w stylu CSS.

1. Utwórz przezroczysty gif lub png 1x1.
   
2. Przypisz odpowiednie " src " IMG do tego obrazu.
   
3. Define final prezentacja z "background-image" w stylu CSS.
   

Działa jak czar:)

Oto bardzo dobre rozwiązanie - > http://css-tricks.com/replace-the-image-in-an-img-with-css/

"Pro" i "Con": {]} ( + ) działa z obrazem wektorowym, który ma względną szerokość/wysokość (rzecz, która RobAu'S odpowiedź nie obsługuje)
( + ) jest cross browser (działa również dla IE8+)
( + ) używa tylko CSS. Więc nie trzeba modyfikować img src (lub jeśli nie masz dostępu/nie chcesz zmienić już istniejącego atrybutu img src).
(- ) sorry, it używa atrybutu css tła:)

Możesz zdefiniować 2 obrazy w kodzie HTML i użyć display: none;, aby zdecydować, który z nich będzie widoczny.

Nie Nie można ustawić atrybutu src obrazu za pomocą CSS. Najbliżej jest, jak mówisz, background lub background-image. I tak nie polecam robienia tego, ponieważ byłoby to nieco nielogiczne.

Jednak, istnieje rozwiązanie CSS3 dostępne dla Ciebie, jeśli przeglądarki, które kierujesz są w stanie go używać. Użycie content:url jak opisano w odpowiedzi Paceriera . Inne rozwiązania między przeglądarkami można znaleźć w innych odpowiedziach poniżej.

Umieść kilka obrazów w kontenerze" kontrolującym " i zmień klasę kontenera. W CSS dodaj reguły do zarządzania widocznością obrazów w zależności od klasy kontenera. Spowoduje to taki sam efekt jak zmiana właściwości img src pojedynczego obrazu.

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

Zauważ, że będzie wstępnie załadować wszystkie obrazy, jak w CSS backround-image s, ale w przeciwieństwie do zmiany img src przez JS.

Alternatywny sposób

.myClass {
background: url('/img/loading_big.gif');
}

<div class="myClass"></div>

Niektóre dane zostawiłbym w HTML, ale lepiej zdefiniować src w CSS:

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

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

O ile mi wiadomo, nie możesz. CSS to styl, a src obrazu to treść.

Aby powtórzyć wcześniejsze rozwiązanie i podkreślić czystą implementację CSS oto moja odpowiedź.

Czyste rozwiązanie CSS jest potrzebne w przypadkach, w których pozyskujesz treści z innej witryny, a tym samym nie masz kontroli nad dostarczanym HTML. W moim przypadku staram się usunąć znakowanie licencjonowanych treści źródłowych, aby licencee nie musiał reklamować się dla firmy, od której kupuje Treści. Dlatego usuwam ich logo, zachowując wszystko inne. Muszę zauważyć, że jest to w umowie mojego klienta, aby to zrobić.

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

Wiem, że to naprawdę stare pytanie, jednak żadne odpowiedzi nie dają właściwego uzasadnienia, dlaczego nigdy nie można tego zrobić. Chociaż możesz "zrobić" to, czego szukasz, nie możesz tego zrobić w prawidłowy sposób. Aby mieć poprawny znacznik img, musi mieć atrybuty src i alt.

Więc każda z odpowiedzi dających sposób na zrobienie tego za pomocą znacznika img, który nie używa atrybutu src, Promuje użycie nieprawidłowego kodu.

W skrócie: czego szukasz nie da się zrobić prawnie w strukturze składni.

Źródło: W3 Validator

Albo możesz zrobić to, co znalazłem na stronie interweb.

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;
}

Tak skutecznie ukrywając obraz i wypełniając tło. Oh co za hack, ale jeśli chcesz znacznik IMG z tekstem alternatywnym i tłem, które można skalować bez użycia JavaScript?

W projekcie, nad którym teraz pracuję, stworzyłem szablon twig block hero

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

Jeśli nie chcesz ustawiać właściwości tła, nie możesz ustawić atrybutu src obrazu używając tylko CSS.

Alternatywnie możesz użyć JavaScript, aby zrobić coś takiego.

Używając CSS, to nie może być zrobione. Ale jeśli używasz JQuery, coś takiego załatwi sprawę:

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

Możesz go przekonwertować za pomocą JS:

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

Jeśli próbujesz dodać obraz w przycisku dynamicznie w oparciu o kontekst projektu, możesz użyć ? przyjrzyj się źródłu na podstawie wyniku. Tutaj używam projektu mvvm, aby pozwolić mojemu modelowi.Fazy [0] wartość określa, czy mój przycisk ma być wypełniony obrazami żarówki włączonej lub wyłączonej na podstawie wartości fazy świetlnej.

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

Dodałbym to: obraz tła może być również umieszczony za pomocą background-position: x y; (x w poziomie y w pionie). (..) Mój przypadek, CSS:

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

Kod HTMl:

<!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>

Kod Css:

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!!!' */);
}

Uczyłem się html po szkole przez kilka dni i chciałem wiedzieć, jak to zrobić. Znalazłem tło i połączyłem 2 i 2. To działa w 100% sprawdziłem, jeśli nie upewnij się, że wypełniasz niezbędne rzeczy!!! Musimy określić wysokość, bo bez niego nie byłoby nic!!! Zostawię tę podstawową powłokę, którą możesz dodać.

Przykład:

 <!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. Tak jestem użytkownikiem Linuksa;)

Każda metoda oparta na background LUB background-image może się nie udać, gdy użytkownik wydrukuje dokument z "wydrukuj tło kolory i obrazy" niepełnosprawni. Co jest niestety domyślne dla typowej przeglądarki.

Jedyną przyjazną dla drukowania i kompatybilną z przeglądarkami metodą jest ta zaproponowana przez Bronx.

Ładowanie IMG src z definicji CSS, przy użyciu nowoczesnych właściwości CSS

<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)>

• pusta definicja src na wyzwala obsługę OnError: loadimg funkcja
• funkcja loadIMG oblicza wartość CSS
• usuwa wszystkie nielegalne znaki
• ustawia IMG.src
• gdy zmieni się CSS, obraz nie jest aktualizowany! Musisz ponownie zadzwonić do loadIMG

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

Wystarczy użyć HTML5:)

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>