CSS'de bir img etiketinin src özelliğinin eşdeğerini ayarlamak mümkün müdür?

532

srcCSS'de öznitelik değerini ayarlamak mümkün müdür ? Şu anda yaptığım şey:

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

ve bunun böyle bir şey olmasını istiyorum

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

Bunu yapmak istiyorum olmadan kullanarak backgroundya da background-image:CSS özelliklerini.

html  css  image 
— Rakesh Juyal
kaynak
1
Bu görünüşe göre CSS3'te
— graphicdivine
7
Artık mümkün. Chrome / Safari / Opera'da test edildi: stackoverflow.com/a/11484688/632951
— Pacerier
2
Ancak FireFox 30.0, Internet Explorer 11.0 desteklemiyor
— Laxmikant Dange
Yalnızca bu CSS çözümü benim için çalıştı (tüm tarayıcılarda): stackoverflow.com/a/19114098/448816 , ancak şunu eklemeliydim: 'background-size: 100%;'.
— mikhail-t
(2020) JS ile yapabilirsiniz getPropertyValue("--src")bkz: jsfiddle.net/CustomElementsExamples/vjfpu3a2
— Danny '365CSI' Engelman

Yanıtlar:

881

Kullanın content:url("image.jpg").

Tam çalışma çözümü ( Live Demo):

<!doctype html>

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

<img class="MyClass123"/>
Snippet'i genişlet

Test edilmiş ve çalışıyor:

  • Krom 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Test ve değil çalışma:

  • FireFox 40.0.2 (Geliştirici Ağ Araçları'nı gözlemleyerek URL'nin yüklendiğini, ancak resmin görüntülenmediğini görebilirsiniz)
  • Internet Explorer 11.0.9600.17905 (URL asla yüklenmez)
— Pacerier
kaynak
7
@gotqn, şu ana kadar yalnızca Chrome Safari Operası.
— Pacerier
36
@EricG, farklı uygulamaların farklı gereksinimleri vardır. İhtiyaçlarınıza uygun değilse kullanmayın. Varsa kullanın.
— Pacerier
4
IE10 çalışmıyor no-go. IE7'yi terk ediyoruz (IE6 hakkında konuşmayalım). IE8 de gerekiyorsa. Ama IE9 - IE10 ... hayır.
— Rolf
11
Worth bile destek atama olduğunu tarayıcılarda eklemek contentiçin img, bu davranışını değiştirir. Görüntü boyut niteliklerini yok saymaya başlar ve Chrome / Safari'de 'Görüntüyü kaydet' gibi içerik menüsü seçeneklerini kaybeder. Bir atama Bunun nedeni contentetkili bir dönüştürür imggelen boş değiştirilmesi gibi bir şeye eleman <span><img></span>.
— Ilya Streltsyn
3
uygun tarayıcı desteği olmadan bunu geçerli bir cevap olarak görmüyorum, üzgünüm.
— emachine
183

Bugün bulduğum bir çözüm var (IE6 +, FF, Opera, Chrome'da çalışır):

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

Nasıl çalışır:

  • Görüntü artık genişlik ve yükseklik tarafından görülmeyene kadar daralır.
  • Ardından, dolgu ile görüntü boyutunu 'sıfırlamanız' gerekir. Bu 16x16 görüntü verir. Tabii ki dikdörtgen görüntüler yapmak için dolgu sol / dolgu üst kullanabilirsiniz.
  • Son olarak, yeni görüntü oraya arka plan kullanılarak konur.
  • Yeni arka plan resmi çok büyük veya çok küçükse, background-sizeörneğin: background-size:cover;görüntünüzü ayrılan alana sığdıranları kullanmanızı öneririm .

Ayrıca giriş-giriş görüntüleri için çalışır, tıklanabilir kalırlar.

Canlı demoya bakın: http://www.audenaerde.org/csstricks.html#imagereplacecss

Zevk almak!

— RobAu
kaynak
6
@RobAnu: Bu oldukça iyi çalışıyor - jsfiddle
— TimPietrusky
9
Bunun büyüleyici ve zeki olduğunu size bildirmeliyim, ancak boş bir DIV daha basit.
— Volomike
11
Bu durumda öyle. Bununla birlikte, HTML'yi kontrol edemediğiniz ve yine de IMG'yi değiştirmek istediğiniz durumlar vardır. Orada da bu çözüm işe yarayacak
— RobAu
2
Resmin bir srcniteliği varsa, ihtiyacınız olan teknik budur. +1 - bana çok yardımcı oldu
— James Long
3
Bazı uygulamalar için çözüm olabilecek bu cevapta sıralama yapmamakla birlikte, bu yöntemin bir sınırlaması vardır. Görüntü dosyasının oluşturulma boyutları üzerinde hiçbir kontrole sahip değilsiniz. Normal kullanımda, dosya kaynakta belirtilmişse, görüntünün yükseklik genişliğini kontrol edebilirsiniz. Ancak bu temelde arka plan resmi olan bir div'dan farklı değildir; div'iniz resimden büyükse şansınız kalmaz.
— TARKUS
113

CSS'den görüntü ayarlamak için olası yöntemlerin bir koleksiyonu

BB2 sitesindeki :aftersözde eleman ya da yeni sözdizimi ::aftergelen CSS3 birlikte content:özelliği:

İlk W3C Tavsiye: Basamaklı Stil Sayfaları, seviye 2 CSS2 Şartname 12 Mayıs 1998
En son W3C Tavsiye: Seçiciler Seviye 3 W3C Tavsiye 29 Eylül 2011

Bu yöntem, içeriği bir öğenin belge ağacı içeriğinden hemen sonra ekler .

Not: bazı tarayıcılar , en son W3C önerisini bile göz ardı ederek özelliği doğrudan bazı öğe seçiciler üzerinden deneysel olarak oluşturur :content

Şunun için geçerlidir: :beforeve :aftersözde elemanlar

CSS2 sözdizimi (ileri uyumlu): 

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

CSS3 Seçici: 

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

Varsayılan görüntü oluşturma: Orijinal Boyut (açık boyut bildirimine bağlı değildir)

Bu spesifikasyon:: ve: after öğelerinin değiştirilen öğelerle (HTML'deki IMG gibi) etkileşimini tam olarak tanımlamaz. Bu, gelecekteki bir spesifikasyonda daha ayrıntılı olarak tanımlanacaktır.

ancak bu yazının yazıldığı tarihte bile, bir <IMG>etikete sahip davranış hala tanımlanmamıştır ve saldırıya uğramış ve standartlara uygun olmayan bir şekilde kullanılabilmesine rağmen , birlikte kullanım <img>tavsiye edilmez !

Harika aday yöntemi, sonuçlara bakın ...

CSS1 'lerbackground-image: özelliği:

İlk W3C Öneri: Basamaklı Stil Sayfaları, seviye 1 17 Ara 1996

Bu özellik, bir öğenin arka plan görüntüsünü ayarlar. Bir arka plan resmi ayarlarken, görüntü kullanılamadığında kullanılacak bir arka plan rengi de ayarlanmalıdır. Görüntü kullanılabilir olduğunda, arka plan renginin üstüne yerleştirilir.

Bu özellik CSS başından beri olmuştur ve yine de görkemli bir söz hak ediyor.

Varsayılan görüntü oluşturma: Orijinal Boyut (ölçeklenemez, yalnızca konumlandırılır)

Ancak ,

CSS3 'ın background-size:bir özellik birden fazla ölçekleme seçeneklerini izin vererek üzerine geliştirilmiş:

En Son W3C Durumu: Aday Öneri CSS Arka Planlar ve Sınırlar Modül Seviye 3 9 Eylül 2014

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

Ancak bu özellikte bile, konteyner boyutuna bağlıdır.

Hala iyi bir aday yöntem, sonuçlara bakın ...

BB2 'ın list-style:yanı sıra mülkiyetdisplay: list-item :

İlk W3C Öneri: Basamaklı Stil Sayfaları, düzey 2 CSS2 Şartname 12 Mayıs 1998

list-style-image: özelliği, liste öğesi işaretçisi (madde işareti) olarak kullanılacak resmi ayarlar

Liste özellikleri, listelerin temel görsel biçimlendirmesini tanımlar: stil sayfalarının işaretçi türünü ( resim , glif veya sayı) belirtmesine izin verir

display: list-item- Bu değer, bir öğenin (örn <li>. HTML'de) bir ana blok kutusu ve bir işaretleyici kutusu oluşturmasına neden olur .

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

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

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

Varsayılan görüntü oluşturma: Orijinal Boyut (açık boyut bildirimine bağlı değildir)

Kısıtlamalar:

  • Kalıtım 'liste stili' değerleri OL ve UL elemanlarından LI elemanlarına aktaracaktır. Liste stili bilgilerini belirtmenin önerilen yolu budur.

  • Yazarların liste işaretçisi için ayrı bir stil (renkler, yazı tipleri, hizalama vb.) Belirtmesine veya konumunu ayarlamasına izin vermezler

Bu yöntem <img>etiket için de uygun değildir , çünkü öğe türleri arasında dönüşüm yapılamaz ve burada Chrome'da çalışmayan sınırlı, uyumlu olmayan bir saldırı .

İyi aday yöntemi, sonuçlara bakın ...

CSS3 bireyin border-image:mülkiyet öneri :

En Son W3C Durumu: Aday Öneri CSS Arka Planlar ve Sınırlar Modül Seviye 3 9 Eylül 2014

Bir arka plan tipi oldukça tuhaf bir biçimde boyutlarını belirtme dayanır yöntemi (bu kullanım şeklini tanımlanmadı) ve yedek sınır özelliklerinin şimdiye kadar (örn. border: solid):

Hiçbir zaman kaydırma mekanizmasına neden olmasalar bile, başlangıçtaki görüntülerin yine de bir ata veya görünüm penceresi tarafından kırpılabileceğini unutmayın.

Bu örnek görüntü varlık göstermektedir oluşan tek bir sağ alt köşesinde olarak dekorasyon :

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

Şunun için geçerlidir: Dahili tablo öğeleri hariç tüm öğeler border-collapse: collapse

Yine de bir etiketini değiştiremez (ancak burada bir hack ), bunun yerine onu dekore edebiliriz:<img>src

Kod snippet'ini göster

Standartlar yayıldıktan sonra dikkate alınacak iyi aday yöntemi.

CSS3 'ın element()notasyonu çalışılan taslak değerinde da bir söz geçerli:

Not: element()İşlev , gerçek içeriği ve yapısını değil, yalnızca referans verilen öğenin görünümünü yeniden üretir .

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

Biz kullanacağız hale içeriğini iki birinin gizli görüntülerin görüntü değiştirmek için arka planı içinde #img1dayalı kimlik Seçici CSS ile:

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

.hide {display: none}

Notlar: Deneyseldir ve yalnızca -mozFirefox'taki önekle çalışır ve yalnızca fazla backgroundveya background-imageözelliklerdir, ayrıca belirtilen boyutlara ihtiyaç duyar.

Sonuçlar

  1. Herhangi bir anlamsal içerik veya yapısal bilgi HTML biçimindedir.
  2. Stil ve sunum bilgileri CSS'ye girer.
  3. SEO amaçları için saklamayın anlamlı görüntüleri .
  4. Arka plan grafikleri genellikle yazdırma sırasında devre dışı bırakılır.
  5. Özel etiketler CSS'den kullanılabilir ve stillendirilebilir, ancak Internet Explorer'ın ilkel sürümleri anlamıyor] ( IE HTML5 etiketlerini (shiv ile) şekillendirmiyor ) Javascript veya CSS kılavuzu olmadan .
  6. SPA'lar (Tek Sayfa Uygulamaları), tasarım gereği, genellikle arka planda görüntüler içerir

Bunu söyledikten sonra, görüntü gösterimine uygun HTML etiketlerini keşfedelim:

<li>Öğe [HTML4.01 +]

Mükemmel bir Usecase list-style-imageiledisplay: list-itemYöntemi .

<li>Eleman, boş olabilir, izin verir içeriği akış ve hatta atlamak için izin verildiği </li>bitiş etiketi.

Kod snippet'ini göster

Sınırlamalar: şekillendirilmesi zor ( width:veya float:yardımcı olabilir)

<figure>Öğe [HTML5 +]

Şekil öğesi, isteğe bağlı olarak bir başlıkla birlikte (tam bir cümle gibi) bulunan ve tipik olarak belgenin ana akışından tek bir birim olarak adlandırılan bazı akış içeriğini temsil eder.

Öğe içerik olmadan geçerlidir, ancak a içermesi önerilir <figcaption>.

Öğe böylece resimlere, şemalara, fotoğraflara , kod listelerine vb. Açıklama eklemek için kullanılabilir .

Varsayılan görüntü oluşturma: öğe hem sol hem de sağ dolgu ile sağa hizalı!

<object>Öğe [HTML4 +]

Görüntüleri dahil etmek için yazarlar OBJECT öğesini veya IMG öğesini kullanabilir.

dataNitelik gereklidir ve geçerli bir olabilir MIME türü bir değer olarak! 

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

Not: <object>etiketi CSS'den kullanmanın bir hilesi, özel bir geçerli MimeType ve x-image/xardından veri yok (değer, gerekli virgülden sonra veri içermez ,)

Varsayılan oluşturma: 300 x 150 piksel, ancak boyut HTML veya CSS'de belirtilebilir.

<SVG>etiket

SVG özellikli bir tarayıcıya ihtiyaç duyar ve <image>tarama görüntüleri için bir öğeye sahiptir

<canvas>Öğe [HTML5 +].

widthÖznitelik varsayılan 300 ve heightöznitelik varsayılan 150 .

<input>ile elemantype="image"

Sınırlamalar:

... öğenin bir düğme olduğunu belirtmek için öğenin düğme benzeri görünmesi beklenir.

Chrome, metin olmadığında 4x4 piksel boş kareyi izler ve oluşturur

Kısmi çözüm, set value=" ": 

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

Ayrıca , şu anda çalışan bir taslak<picture> olan HTML5.1'de yaklaşan öğeye dikkat edin .

— CSᵠ
kaynak
(2020) CSS özelliklerini kullanın: stackoverflow.com/questions/2182716/…
— Danny '365CSI' Engelman
Harika bir cevap ama web'in temel ilkeleri sağlamada bir platform olarak tamamen başarısız olduğunu gösteriyor.
— serraosays
26

Bu CSS ile boş div çözümünü kullandım:

#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
kaynak
Satır içi görüntülemek istersem ne olur? "Display: inline" eklemek, 0x0 ...
— elsurudo
1
@elsurudo Bir satır içi öğede genişlik ve yükseklik ayarlamak istiyorsanız display: inline-block komutunu kullanın
— Erin Drummond
1
En iyi cevap Firefox ile çalışmıyor, bu yüzden cevabınızı daha çok beğeniyorum! Ve açık ve css kesmek yok.
— Sergey Bogdanov
Birden fazla görüntü göstermeniz gerekiyorsa, id alanının teknik olarak benzersiz olması gerektiğini unutmayın, bu nedenle kimlik yerine bir CSS sınıfı seçici kullanmak idealdir.
— mix3d
Yazdırma ayarlarında arka plan grafikleri kapalıysa, bu tür görüntüler düzgün yazdırılmaz.
— posfan12
14

Önerilen çözümlerden daha iyi bir yol buldum, ama gerçekten arka plan görüntüsünü kullanıyor. Uyumlu yöntem (IE6 için onaylanamaz) Kredi: 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;
}

Eski görüntü görülmez ve yeni beklendiği gibi görülür.


Aşağıdaki düzgün çözüm yalnızca webkit için geçerlidir

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

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

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

}
— EricG
kaynak
Bu düzgün bir numara ama gerçekten standartlara uygun mu? W3C sayfasını diyor contentmülkiyet için geçerlidir :beforeve :aftersözde sınıfları. Ayrıca, IE7 veya daha önceki bir contentsürümü desteklemeniz gerekiyorsa, destek olmadığını düşünüyorum . Yine de çok cazip.
— jatrim
Haklısın, daha uyumlu bir yöntem buldum. Yazım güncelleniyor! Şimdi bana oy ver;) Haha.
— EricG
Güncellenmiş yaklaşım kesinlikle içeriğe dayanan yaklaşımdan daha iyidir. Orijinal bağlantıyı eklediğiniz için teşekkür ederiz. Bu anlayışlıydı. @ RobAu'nun cevabının aslında güncellenmiş sürümünüze çok benzediğini göreceksiniz.
— jatrim
1
@jatrim contentÖzellik tüm öğeler için geçerlidir. http://www.w3.org/TR/css3-content/#content
— XP1
13

Haklılar. IMG bir içerik öğesidir ve CSS tasarımla ilgilidir. Ancak, bazı içerik öğelerini veya özelliklerini tasarım amacıyla ne zaman kullanırsınız? Stili değiştirdiğimde değişmesi gereken web sayfalarım boyunca IMG var (CSS).

Bu, IMG sunumunu (gerçekten görüntü yok) CSS tarzında tanımlamak için bir çözümdür.

  1. 1x1 şeffaf gif veya png oluşturun.
  2. Bu görüntüye IMG'nin "src" kodunu uygun şekilde atayın.
  3. CSS tarzında "arka plan görüntüsü" ile son sunumu tanımlayın.

Mucizevi şekilde çalışır :)

— dürüst
kaynak
5
-1 Cevabınız kötü olmasa da, özellikle kullanmak istemediğinden bahsediyorbackground*
— fresskoma
1
Bu bir hile ... Bence hileler tarayıcılar tarafından değiştirilecek ... ve sabah bir gün web sitenizde bir cehennem göreceksiniz: D :)))
— Mehdi Jazini
11

İşte çok iyi bir çözüm -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro (s) ve Con (s):
(+) vektör ile çalışır göreli genişlik / yükseklik (yani bir şey var görüntü RobAu 'ın cevabı işleyemez)
(+) çapraz tarayıcı (IE8 + için de çalışır) olduğu
(+) yalnızca CSS kullanır. Bu nedenle img src'yi değiştirmenize gerek yoktur (veya erişiminiz yoksa / var olan img src özniteliğini değiştirmek istemiyorsanız).
(-) üzgünüm, kullanmak yapar arkaplan css özelliğini :)

— ovic
kaynak
Şimdi, bu doğru çözüm, tüm tarayıcılarda benim için çalışıyor, teşekkürler !! Ayrıca bahsetmeye değer eklemeliydim: background-size: 100%; yerine yedek görüntü göstermek için yukarıdaki çözüm css sınıf.
— mikhail-t
9

HTML kodunuzda 2 resim tanımlayabilir ve display: none;hangisinin görüneceğini belirlemek için kullanabilirsiniz .

— Kostas Andrianopoulos
kaynak
Ben Web Duyarlı ama aynı zamanda SEO korunan bir çözüm için çok geniş arıyorlardı. Kullanılan cihaza bağlı olarak resmimi değiştirmek için CSS'deki medya sorgularını kullanmak istedim, ancak içeriğimi HTML'de tutmak istedim. CSS'deki kaynakların bildirilmesi benim almak istemediğim bir rota background-imageolduğu için bir seçenek değildi. imgSEO amaçlı etiketler istedim . Cevabınız çok basit, zarif ve tüm engellerimi çözüyor! Bravo! Ayrıca kullanıcının her iki görüntüyü de indirmesi gerekmez. Ayrıca, istediğiniz kadar resim ekleyebilirim.
— Xavier
Şimdiye kadar okuduğum her cevap, ya stil sayfamdaki kaynaklarımı bildirmeye ya da işaretlememde satır içi CSS kullanmaya zorlayacak. İkisinden de memnun kalmadım. Dağınık kod!
— Xavier
7

Hayır image src niteliğini CSS aracılığıyla ayarlayamazsınız. Size en yakın, dediğin gibi, backgroundya da background-image. Biraz mantıksız olacağını zaten bunu tavsiye etmem.

Ancak, hedeflediğiniz tarayıcılar bunu kullanabiliyorsa, kullanabileceğiniz bir CSS3 çözümü vardır. content:url Pacerier'in cevabında açıklandığı şekilde kullanın . Aşağıdaki diğer yanıtlarda diğer tarayıcılar arası çözümleri bulabilirsiniz.

— cletus
kaynak
1
neden aşağı oy? bu cevap kabul edilen cevaptan daha doğrudur.
— harsimranb
1
Şimdiye kadarki en iyi cevap: HAYIR, CSS ile yapamazsınız.
— Milche Patern
4

Birkaç resmi "denetleyen" bir kaba koyun ve bunun yerine kabın sınıfını değiştirin. CSS'de, kabın sınıfına bağlı olarak görüntülerin görünürlüğünü yönetmek için kurallar ekleyin. Bu, değişmeyle aynı etkiyi yaratacaktır.img src tek bir görüntünün özelliği ile .

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

CSS'lerde olduğu gibi JS ile backround-imagedeğiştirmenin aksine tüm görüntüleri önceden img srcyükleyeceğini unutmayın.

— Bronx
kaynak
3

Alternatif yol

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

Bazı veriler Ben HTML bırakacaktı, ama tanımlamak için daha iyidir src CSS'deki:

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

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

Bildiğim kadarıyla, sen yapamazsın. CSS stil ile ilgilidir ve görüntünün içeriği içeriktir.

— NawaMan
kaynak
3
Günümüzde, çoğu zaman görüntüler sadece sayfayı şekillendirmek için vardır.
— Lorenzo Polidori
2
Bunun anlamı, kenarlıklar, arka planlar vb. Olarak kullanılan resimler ile aslında sayfa içeriğinin bir parçası olan resimler arasında bir fark olabileceğidir. diyagramları, makale fotoğrafları vb.
— Rhys van der Waerden
1
SİZ YAPABİLİRSİNİZ ve istediğiniz, yaygın, geçerli durumlar vardır.
— ryan0
2

Önceki bir çözümü tekrarlamak ve burada saf CSS uygulamasını vurgulamak benim cevabım.

Başka bir siteden içerik sağladığınız durumlarda Pure CSS çözümü gereklidir ve bu nedenle teslim edilen HTML üzerinde kontrolünüz yoktur. Benim durumumda, lisans sahibinin içeriği satın aldıkları şirket için reklam vermek zorunda kalmaması için lisanslı kaynak içeriğin markalamasını kaldırmaya çalışıyorum. Bu nedenle, her şeyi korurken logolarını kaldırıyorum. Bunun müşterinin sözleşmesi dahilinde olduğunu belirtmeliyim.

{ /* 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
kaynak
2

Bunun gerçekten eski bir soru olduğunu biliyorum, ancak hiçbir cevap bunun neden asla yapılamayacağına dair uygun bir gerekçe sunmuyor. Aradığınızı "yapabilirsiniz", ancak geçerli bir şekilde yapamazsınız. Geçerli bir img etiketi sahip olmak için mutlaka sahip olmak için src ve alt niteliklerine sahip .

Bu nedenle, src özniteliğini kullanmayan bir img etiketi ile bunu yapmanın bir yolunu veren cevaplardan herhangi biri geçersiz kod kullanımını teşvik ediyor.

Kısacası: aradığınız şey sözdizimi çerçevesinde yasal olarak yapılamaz.

Kaynak: W3 Doğrulayıcı

— Geowil
kaynak
2

Ya da iç içe olan şeyde bulduğum şeyi yapabilirsin.

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

Böylece görüntüyü gizleme ve arka planı doldurma. Oh ne bir hack ama alt metin ve JavaScript kullanmadan ölçeklendirilebilir bir arka plan ile bir IMG etiketi istiyorsanız?

Üzerinde çalıştığım bir projede bir kahraman blok dal şablonu oluşturdum

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

Bir background özelliği ayarlamak istemiyorsanız, görüntünün src niteliğini yalnızca CSS kullanarak ayarlayamazsınız.

Alternatif olarak, böyle bir şey yapmak için JavaScript'i kullanabilirsiniz.

— Guillaume Flandre
kaynak
1

JS ile dönüştürebilirsiniz:

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

Projenizin bağlamına göre dinamik olarak bir düğmeye görüntü eklemeye çalışıyorsanız,? bir sonuca göre kaynağa atıfta bulunmak. Burada mvvm tasarımı kullanıyorum Model.Phases [0] değeri, düğmemin ışık fazının değerine bağlı olarak bir ampulün görüntüleri ile açılıp kapanmasını isteyip istemediğimi belirlemek için kullanıyorum.

Bunun yardımcı olup olmadığından emin değilim. JqueryUI, Blueprint ve CSS kullanıyorum. Sınıf tanımı, düğmeyi istediğiniz her şeye göre şekillendirmenize izin vermelidir.

    <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
kaynak
0

Bunu eklerdim: arka plan resmi background-position: x y;(x yatay y dikey) ile de konumlandırılabilir . (..) Benim durumum, CSS:

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

HTML Kodu: 

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

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

Birkaç gündür okuldan sonra html okuyorum ve bunun nasıl yapılacağını bilmek istedim. Arka planı buldum ve sonra 2 ve 2'yi bir araya getirin. Bu,% 100 kontrol ettim, gerekli şeyleri doldurduğunuzdan emin değilseniz !!! Yüksekliği belirtmemiz gerekiyor, çünkü onsuz hiçbir şey olmaz !!! Ekleyebileceğiniz bu temel kabuğu bırakacağım.

Misal:

 <!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/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}

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

PS Evet ben bir Linux kullanıcısıyım;)

— Z_Doctor
kaynak
0

Kullanıcı belgeyi " arka plan renklerini ve resimlerini yazdır " devre dışı bırakıldığında yazdırdığında backgroundveya background-imagebaşarısız olması muhtemel herhangi bir yöntem . Maalesef tipik tarayıcı varsayılanıdır.

Buradaki tek yazıcı dostu ve tarayıcılar arası uyumlu yöntem Bronx tarafından önerilen yöntemdir.

— Simon Rozman
kaynak
0

Modern CSS özelliklerini kullanarak IMG src'yi CSS tanımından yükleme

<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)>
Snippet'i genişlet

  • src<IMG> üzerindeki boş tanım, hata işleyiciyi tetikler: loadIMG işlevi
  • loadIMG işlevi CSS değerini hesaplar
  • tüm yasadışı karakterleri kaldırır
  • IMG.src dosyasını ayarlar
  • CSS değiştiğinde, görüntü güncellenmez! LoadIMG'yi tekrar aramanız gerekir

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

İlgili SO yanıtları: WCPROPS

— Danny '365CSI' Engelman
kaynak
-3

Sadece HTML5 kullanın :) 

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
— maksimum
kaynak
OP, HTML işaretlemelerini bir CSS çözümü ile temizlemek istiyor. Bu cevap sadece işaretlemeyi daha da karmaşıklaştıracaktır.
— webaholik
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.