Czy można ustawić ekwiwalent atrybutu src znacznika img w CSS?

531

Czy można ustawić srcwartość atrybutu w CSS? Obecnie to, co robię, to:

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

i chcę, żeby to było coś takiego

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

Chcę to zrobić bez użycia właściwości backgroundlub background-image:w CSS.

html css image Rakesh Juyal
źródło
1
To jest podobno będzie możliwe w CSS3: w3.org/TR/css3-values/#attribute
graphicdivine
7
To jest teraz możliwe. Testowane na Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
Pacerier
2
Ale FireFox 30.0, Internet Explorer 11.0 nie obsługuje
Laxmikant Dange
To rozwiązanie tylko dla CSS działało dla mnie (we wszystkich przeglądarkach): stackoverflow.com/a/19114098/448816 , z wyjątkiem tego, że musiałem dodać: „rozmiar tła: 100%;”.
mikhail-t
(2020) Możesz to zrobić za pomocą JS getPropertyValue("--src"): jsfiddle.net/CustomElementsExamples/vjfpu3a2
Danny „365CSI” Engelman

Odpowiedzi:

880

Zastosowanie content:url("image.jpg").

W pełni działające rozwiązanie ( Live Demo):

<!doctype html>

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

<img class="MyClass123"/>
Rozwiń fragment kodu

Testowane i działające:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Testowane i nie działa:

  • FireFox 40.0.2 (obserwując narzędzia programistów sieci, widać, że adres URL się ładuje, ale obraz nie jest wyświetlany)
  • Internet Explorer 11.0.9600.17905 (URL nigdy się nie ładuje)
Pacerier
źródło
7
@gotqn, jak dotąd tylko Chrome Safari Opera.
Pacerier
36
@EricG, różne aplikacje mają różne wymagania. Jeśli nie spełnia twoich wymagań, nie używaj go. Jeśli tak, użyj go.
Pacerier
4
Nie działa IE10 jest nie do przejścia. Porzucamy IE7 (nie mówmy o IE6). W razie potrzeby także IE8. Ale IE9 - IE10 ... nie.
Rolf,
11
Warto dodać, że nawet w przeglądarkach obsługujących przypisanie contentdo img, zmienia swoje zachowanie. Obraz zaczyna ignorować atrybuty rozmiaru, aw przeglądarce Chrome / Safari traci opcje menu kontekstowego, takie jak „Zapisz obraz”. To dlatego, że przypisanie do contentskutecznego nawróconych imgz pustym zastąpiony elementem do czegoś podobnego <span><img></span>.
Ilya Streltsyn
3
bez odpowiedniego wsparcia przeglądarki nie uważam tego za prawidłową odpowiedź, przepraszam.
emachine
183

Istnieje rozwiązanie, które dzisiaj 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 jest widoczny przez szerokość i wysokość.
  • Następnie musisz „zresetować” rozmiar obrazu za pomocą wypełnienia. Ten daje obraz 16x16. Oczywiście możesz użyć padding-left / padding-top, aby zrobić prostokątne obrazy.
  • Na koniec nowy obraz jest tam umieszczany za pomocą tła.
  • Jeśli nowy obraz tła jest za duży lub za mały, polecam background-sizena przykład: background-size:cover;który pasuje do twojego obrazu w przydzielonej przestrzeni.

Działa również w przypadku obrazów wejściowych, które można kliknąć.

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

Cieszyć się!

RobAu
źródło
6
@RobAnu: Działa to całkiem dobrze - jsfiddle
TimPietrusky
9
Muszę ci powiedzieć, że jest to fascynujące i sprytne, ale pusty DIV jest bardziej prosty.
Volomike,
11
W tym przypadku tak jest. Zdarzają się jednak przypadki, w których nie można kontrolować HTML i mimo to chce się manipulować IMG. Tam również zadziała to rozwiązanie
RobAu,
2
Jeśli obraz ma srcatrybut, jest to technika, której potrzebujesz. +1 - bardzo mi pomogło
James Long,
3
Brak rankingu w tej odpowiedzi, co może być rozwiązaniem dla niektórych aplikacji, ale ta metoda ma ograniczenia. Nie masz kontroli nad wymiarami renderowania pliku obrazu. Podczas normalnego użytkowania możesz kontrolować wysokość-szerokość obrazu, jeśli plik jest określony w źródle. Ale w zasadzie nie różni się to od div z obrazem tła, w którym jeśli div jest większy od obrazu, nie masz szczęścia.
TARKUS,
113

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

CSS 2 „s :afterPseudoelement lub nowszy składni ::afterz CSS 3 wraz z content:właściwości:

Pierwsza rekomendacja W3C: Kaskadowe arkusze stylów, poziom 2 Specyfikacja CSS2 12 maja 1998
Najnowsza rekomendacja W3C: Selektory Poziom 3 Rekomendacja W3C 29 września 2011

Ta metoda dodaje treść tuż po zawartości drzewa dokumentu elementu.

Uwaga: niektóre przeglądarki eksperymentalnie renderują contentwłaściwość bezpośrednio na niektórych selektorach elementów, ignorując nawet najnowsze zalecenia W3C, które definiują:

Dotyczy: :beforei :afterpseudoelementów

Składnia CSS2 (kompatybilna z przyszłością): 

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

Selektor CSS3: 

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

Domyślne renderowanie: Rozmiar oryginału (nie zależy od wyraźnej deklaracji rozmiaru)

Ta specyfikacja nie definiuje w pełni interakcji: przed i po po zastąpieniu elementów (takich jak IMG w HTML). Zostanie to określone bardziej szczegółowo w przyszłej specyfikacji.

ale nawet w momencie pisania tego tekstu zachowanie ze <IMG>znacznikiem wciąż nie jest zdefiniowane i chociaż można go używać w zhakowany i niezgodny ze standardami sposób , nie zaleca się używania z nim<img> !

Świetna metoda kandydacka, patrz wnioski ...

CSS1 „s background-image:nieruchomości:

Pierwsza rekomendacja W3C: Cascading Style Sheets, poziom 1 17 grudnia 1996

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

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

Domyślny rendering: Rozmiar oryginału (nie można go skalować, tylko pozycjonować)

Jednakże ,

CSS3 „s background-size:nieruchomość poprawiła na nim, pozwalając wiele opcji skalowania:

Najnowszy status W3C: Rekomendacje dla kandydatów CSS Tła i granice Moduł Poziom 3 9 września 2014 r

[length> | <percentage> | auto ]{1,2} | cover | contain

Ale nawet w przypadku tej właściwości zależy to od wielkości pojemnika.

Nadal dobra metoda kandydująca, patrz wnioski ...

CSS2 „s list-style:nieruchomość wraz z display: list-item:

Pierwsza rekomendacja W3C: Kaskadowe arkusze stylów, specyfikacja CSS2 poziomu 2, 12 maja 1998 r

list-style-image: ustawia obraz, który będzie używany jako znacznik elementu listy (punktor)

Właściwości listy opisują podstawowe wizualne formatowanie list: pozwalają arkuszom stylów określić typ znacznika ( obraz , glif lub liczba)

display: list-item- Ta wartość powoduje, że element (np. <li>W HTML) generuje pole bloku głównego i pole znacznika.

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

Stenografia CSS: ( <list-style-type> <list-style-position> <list-style-image>) 

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

Domyślne renderowanie: Rozmiar oryginału (nie zależy od wyraźnej deklaracji rozmiaru)

Ograniczenia:

  • Dziedziczenie przeniesie wartości typu listy z elementów OL i UL do elementów LI. Jest to zalecany sposób określania informacji o stylu listy.

  • Nie pozwalają autorom określać odrębnego stylu (kolorów, czcionek, wyrównania itp.) Znacznika listy ani zmieniać jego pozycji

Ta metoda jest również nieodpowiednia dla <img>tagu, ponieważ nie można dokonać konwersji między typami elementów, a oto ograniczony, niezgodny hack , który nie działa w Chrome.

Dobra metoda kandydacka, patrz wnioski ...

CSS3 „s border-image:nieruchomość zalecenie :

Najnowszy status W3C: Rekomendacje dla kandydatów CSS Tła i granice Moduł Poziom 3 9 września 2014 r

Tło typu metoda, która opiera się na określenie rozmiarów w dość osobliwy sposób (nie zdefiniowane dla tego przypadku użycia) i zastępczych właściwościach granicznych tej pory (np. border: solid):

Należy pamiętać, że nawet jeśli nigdy nie powodują one mechanizmu przewijania, obrazy początkowe mogą być nadal przycinane przez przodka lub przez rzutnię.

Ten przykład ilustruje kompozycję obrazu jedynie jako dekorację w prawym dolnym rogu :

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

Dotyczy: wszystkich elementów, z wyjątkiem wewnętrznych elementów tabeli, kiedy border-collapse: collapse

Nadal nie można zmienić wykonania <img>„s tag src(ale tutaj jest hack ), zamiast tego możemy go ozdobić:

Pokaż fragment kodu

Dobra metoda kandydująca do rozważenia po rozpowszechnieniu standardów.

CSS3 „s element()zapis projekt pracy warto wspomnieć również:

Uwaga: element()Funkcja odtwarza jedynie wygląd przywoływanego elementu, a nie rzeczywistą treść i jego 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">

Użyjemy wyrenderowanej zawartości jednego z dwóch ukrytych obrazów, aby zmienić tło obrazu w #img1oparciu o Selektor ID za pomocą CSS:

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

.hide {display: none}

Uwagi: Jest eksperymentalny i działa tylko z -mozprefiksem w Firefoksie i tylko nad backgroundlub background-imagewłaściwościami, wymaga także określonych rozmiarów.

Wnioski

  1. Wszelkie treści semantyczne lub informacje strukturalne są w formacie HTML.
  2. Informacje o stylizacji i prezentacji znajdują się w CSS.
  3. Dla celów SEO nie ukrywaj znaczących obrazów w CSS.
  4. Grafika w tle jest zwykle wyłączona podczas drukowania.
  5. Niestandardowe tagi mogą być używane i stylizowane z CSS, ale prymitywne wersje Internet Explorera nie rozumieją] ( IE nie stylizuje tagów HTML5 (z shiv) ) bez wskazówek Javascript lub CSS .
  6. Zasadniczo w SPA (aplikacje pojedynczej strony) z reguły włączane są obrazy w tle

Powiedziawszy to, przyjrzyjmy się tagom HTML odpowiednim do wyświetlania obrazu:

<li>Elementem [HTML4.01 +]

Idealne zastosowanie list-style-imagez display: list-itemmetodą.

<li>Element może być pusta, umożliwia przepływ treści i to nawet wolno pominąć </li>znacznik końcowy.

Pokaż fragment kodu

Ograniczenia: trudne do stylu ( width:lub float:może pomóc)

<figure>Elementem [HTML5 +]

Element ryciny reprezentuje pewną treść przepływu, opcjonalnie z podpisem, który jest samodzielny (jak całe zdanie) i zwykle jest określany jako pojedyncza jednostka z głównego przepływu dokumentu.

Element jest prawidłowy bez treści, ale zaleca się, aby zawierał <figcaption>.

Element można zatem wykorzystać do opisywania ilustracji, diagramów, zdjęć , list kodów itp.

Domyślne renderowanie: element jest wyrównany do prawej, z dopełnieniem zarówno do lewej, jak i prawej strony!

<object>Elementem [HTML4 +]

Aby dołączyć obrazy, autorzy mogą użyć elementu OBJECT lub IMG.

Ten dataatrybut jest wymagany i może mieć poprawny typ MIME jako wartość! 

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

Uwaga: sztuczką w użyciu <object>tagu z CSS byłoby ustawienie niestandardowego prawidłowego typu MimeType, x-image/xpo którym nie ma danych (wartość nie zawiera danych po wymaganym przecinku ,)

Domyślny rendering: 300 x 150 pikseli, ale rozmiar można określić w HTML lub CSS.

<SVG>tag

Potrzebuje przeglądarki obsługującej SVG i zawiera <image>element do obrazów rastrowych

<canvas>Elementem [HTML5 +].

Te widthwartości domyślne atrybut do 300 , i heightdomyślne atrybut do 150 .

<input>Element otype="image"

Ograniczenia:

... element powinien wyglądać jak przycisk, wskazując, że element jest przyciskiem.

które Chrome podąża i wyświetla pusty kwadrat 4x4px, gdy nie ma tekstu

Częściowe rozwiązanie, zestaw value=" ": 

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

Uważaj również na nadchodzący <picture>element w HTML5.1 , obecnie działający projekt .

CSᵠ
źródło
(2020) Użyj właściwości CSS: stackoverflow.com/questions/2182716/…
Danny „365CSI” Engelman
Świetna odpowiedź, ale pokazuje całkowity błąd sieci jako platformy do dostarczania podstawowych prymitywów.
serraosays
26

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>
Emmanuel Touzery
źródło
Co jeśli chcę wyświetlić go w tekście? Dodanie „display: inline” daje wymiar div 0x0 ...
elsurudo
1
@elsurudo Użyj display: inline-block, jeśli chcesz ustawić szerokość i wysokość elementu wbudowanego
Erin Drummond
1
Najlepsza odpowiedź nie działa z Firefoksem, więc bardziej podoba mi się twoja odpowiedź! I jest jasne i nie ma hacków css.
Sergey Bogdanov
Jeśli chcesz wyświetlić więcej niż jeden obraz, pamiętaj, że pole ID powinno technicznie być unikalne, więc użycie selektora klasy CSS zamiast ID jest idealne.
mix3d
Obrazy tego typu nie będą drukowane prawidłowo, jeśli grafika tła jest wyłączona w ustawieniach drukowania.
posfan12
14

Znalazłem lepszy sposób niż proponowane rozwiązania, ale rzeczywiście wykorzystuje on 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 widziany zgodnie z oczekiwaniami.


Poniższe schludne rozwiązanie działa tylko w przypadku pakietu WebKit

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

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

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

}
EricG
źródło
To fajna sztuczka, ale czy naprawdę jest zgodna ze standardami? Strona W3C mówi, że ta contentwłaściwość dotyczy tylko klas pseudo :beforei :after. Ponadto, jeśli musisz obsługiwać IE7 lub wcześniejsze, myślę, że contentwsparcie nie istnieje. Mimo to bardzo kuszące.
jatrim
Masz rację, właśnie znalazłem metodę bardziej zgodną. Aktualizowanie mojego postu! Teraz głosujcie na mnie;) Haha.
EricG,
Zaktualizowane podejście jest zdecydowanie lepsze niż oparte na treści. Dziękujemy za dołączenie oryginalnego linku. To było wnikliwe. Zauważysz, że odpowiedź @ RobAu jest bardzo podobna do twojej zaktualizowanej wersji.
jatrim
1
@jatrim contentWłaściwość dotyczy wszystkich elementów. http://www.w3.org/TR/css3-content/#content
XP1
13

Oni mają rację. IMG jest elementem treści, a CSS dotyczy projektowania. Ale co powiesz na to, kiedy użyjesz niektórych elementów treś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).

Jest to rozwiązanie do definiowania prezentacji IMG (tak naprawdę nie obrazu) w stylu CSS.

  1. utwórz przezroczysty gif lub png 1x1.
  2. Przypisz właściwość „src” IMG do tego obrazu.
  3. Zdefiniuj końcową prezentację za pomocą „obrazu tła” w stylu CSS.

To działa jak urok :)

Szczery
źródło
5
-1 Chociaż twoja odpowiedź nie jest zła, wspomina konkretnie, że nie chce go używaćbackground*
fresskoma
1
to jest sztuczka ... moim zdaniem sztuczki zostaną zmienione przez przeglądarki ... a dzień rano zobaczysz piekło na swojej stronie: D :)))
Mahdi Jazini
11

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

Pro (s) i Con (s):
(+) działa z wektorem obraz, który ma względną szerokość / wysokość (coś że RobAu „s odpowiedź nie handle)
(+) jest cross przeglądarki (działa również dla IE8 +)
(+) używa tylko CSS. Nie trzeba więc modyfikować img src (lub jeśli nie masz dostępu / nie chcesz zmieniać już istniejącego atrybutu img src).
(-) przepraszam, używa atrybutu css w tle :)

OviC
źródło
To właściwe rozwiązanie, działa dla mnie we wszystkich przeglądarkach, dzięki !! Warto również wspomnieć, że musiałem dodać: rozmiar tła: 100%; do klasy css w powyższym rozwiązaniu, aby obraz zastępczy wyświetlał się poprawnie.
mikhail-t
9

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

Kostas Andrianopoulos
źródło
Szeroko szukałem rozwiązania, które byłoby responsywne, ale utrzymywało także SEO. Chciałem użyć zapytań o media w CSS, aby zmienić mój obraz w zależności od używanego urządzenia, ale chciałem zachować treść w HTML. Zadeklarowanie źródeł w CSS było trasą, której nie chciałem wybierać, więc background-imagenie było opcji. Chciałem imgtagi do celów SEO. Twoja odpowiedź jest taka prosta, elegancka i rozwiązuje wszystkie moje przeszkody! Brawo! Ponadto użytkownik nie musi pobierać obu obrazów. Ponadto mogę dodać dowolną liczbę zdjęć.
Xavier
Każda odpowiedź, którą przeczytałem do tej pory, zmusiłaby mnie do zadeklarowania źródeł w arkuszu stylów lub użycia wbudowanego CSS w znacznikach. Żaden z nich nie byłam zadowolona. Niechlujny kod!
Xavier
7

Nie, nie możesz ustawić atrybutu src obrazu za pomocą CSS. Najbliżej można dostać, jak mówisz, backgroundlub background-image. I tak nie poleciłbym tego robić, ponieważ byłoby to trochę nielogiczne.

Dostępne jest jednak rozwiązanie CSS3, jeśli przeglądarki, na które celujesz, mogą z niego korzystać. Użyj content:url zgodnie z opisem w odpowiedzi Paceriera . Możesz znaleźć inne rozwiązania dla różnych przeglądarek w innych odpowiedziach poniżej.

Cletus
źródło
1
dlaczego głosowanie w dół? ta odpowiedź jest dokładniejsza niż odpowiedź zaakceptowana.
harsimranb
1
Najlepsza jak dotąd odpowiedź: NIE, nie można tego zrobić za pomocą CSS.
Milche Patern
4

Umieść kilka obrazów w kontenerze „kontrolującym” i zamiast tego zmień klasę kontenera. W CSS dodaj reguły zarządzania widocznością obrazów w zależności od klasy kontenera. To da taki sam efekt, jak zmiana img srcwłaściwości 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 wstępnie załaduje wszystkie obrazy, tak jak w CSS backround-image, ale w przeciwieństwie do zmiany img srcza pomocą JS.

Bronx
źródło
3

Alternatywny sposób

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Tukaz
źródło
3

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');
}
Renat Gatin
źródło
2

O ile mi wiadomo, NIE MOŻESZ. CSS dotyczy stylu, a src obrazu to treść.

NawaMan
źródło
3
W dzisiejszych czasach dość często obrazy służą jedynie do stylizacji strony.
Lorenzo Polidori
2
Oznacza to, że mogą występować różnice między obrazami używanymi jako obramowania, tła itp. A tymi, które faktycznie są częścią zawartości strony, tj. diagramy, zdjęcia artykułów itp.
Rhys van der Waerden
1
MOŻESZ, a są wspólne, ważne przypadki, w których chciałbyś.
ryan0
2

Powtórzenie wcześniejszego rozwiązania i podkreślenie czystego wdrożenia CSS tutaj jest moją odpowiedzią.

Rozwiązanie Pure CSS jest potrzebne w przypadkach, gdy pozyskujesz zawartość z innej witryny, a zatem nie masz kontroli nad dostarczanym HTML. W moim przypadku próbuję usunąć branding licencjonowanych treści źródłowych, aby licencjobiorca nie musiał reklamować się w firmie, od której kupuje treści. Dlatego usuwam ich logo, zachowując wszystko inne. Powinienem zauważyć, że jest to zgodne z umową 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);
}
Daniel Byrne
źródło
2

Wiem, że to naprawdę stare pytanie, jednak żadne odpowiedzi nie uzasadniają, dlaczego nigdy nie można tego zrobić. Chociaż możesz „robić” to, czego szukasz, nie możesz tego robić w prawidłowy sposób. Aby mieć prawidłowy znacznik img, musi mieć atrybuty src i alt.

Tak więc każda z odpowiedzi dających sposób na zrobienie tego z tagiem img, który nie używa atrybutu src, promuje użycie nieprawidłowego kodu.

W skrócie: tego, czego szukasz, nie można legalnie wykonać w ramach struktury składni.

Źródło: W3 Validator

Geowil
źródło
2

Albo możesz to zrobić, 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;
}

Skutecznie ukrywa obraz i wypełnia tło. Och, co za hack, ale jeśli chcesz tag 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 gałązki bloku bohatera

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
Pocketninja
źródło
1

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

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

Guillaume Flandre
źródło
1

Za pomocą CSS nie da się tego zrobić. Ale jeśli używasz JQuery, coś takiego wystarczy:

$("img.myClass").attr("src", "http://somwhere");
Veera
źródło
faktycznie może)) zobacz odpowiedź na to samo pytanie tutaj: stackoverflow.com/questions/2182716/…
mikhail-t
1

Możesz to przekonwertować za pomocą JS:

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

Jeśli próbujesz dynamicznie dodać obraz do przycisku na podstawie kontekstu swojego projektu, możesz użyć? odwołać się do źródła na podstawie wyniku. Tutaj używam projektu mvvm, aby moja wartość Model.Phases [0] określała, czy chcę, aby mój przycisk był zapełniany obrazami żarówki włączanej lub wyłączanej na podstawie wartości fazy światła.

Nie jestem pewien, czy to pomaga. Używam JqueryUI, Blueprint i CSS. Definicja klasy powinna umożliwiać stylizację przycisku na podstawie tego, co chcesz.

    <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
źródło
0

Dodałbym to: obraz tła można również ustawić za pomocą background-position: x y;(x poziomo i pionowo). (..) Moja sprawa, CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)
Jan
źródło
0

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

Studiowałem HTML po szkole przez kilka dni i chciałem wiedzieć, jak to zrobić. Znajdź tło, a następnie połącz 2 i 2 razem. Działa to w 100% sprawdziłem, jeśli nie, upewnij się, że wypełniłeś niezbędne rzeczy !!! Musimy określić wysokość, ponieważ bez niej 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");
}

PS Tak, jestem użytkownikiem Linuksa;)

Z_Doctor
źródło
0

Każda metoda oparta na backgroundlub background-imageprawdopodobnie zawiedzie, gdy użytkownik wydrukuje dokument z „drukowaniem kolorów i obrazów tła ” wyłączonym . Co jest niestety typową domyślną przeglądarką.

Jedyną metodą przyjazną do wydruku i zgodną z wieloma przeglądarkami jest ta zaproponowana przez Bronx.

Simon Rozman
źródło
0

Ł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)>
Rozwiń fragment kodu

  • pusta srcdefinicja na <IMG> wyzwala funkcję onerror handler: loadIMG
  • Funkcja loadIMG oblicza wartość CSS
  • usuwa wszystkie nielegalne znaki
  • ustawia IMG.src
  • kiedy CSS się zmienia, obraz NIE jest aktualizowany! Musisz ponownie wywołać loadIMG

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

Powiązane odpowiedzi SO: WCPROPS

Danny „365CSI” Engelman
źródło
-3

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>
Max
źródło
OP chce specjalnie wyczyścić znaczniki HTML za pomocą rozwiązania CSS. Ta odpowiedź tylko zaśmieciłaby znaczniki.
webaholik