Apakah mungkin untuk menetapkan setara dengan atribut src dari tag img di CSS?

533

Apakah mungkin untuk menetapkan nilai srcatribut dalam CSS? Saat ini, apa yang saya lakukan adalah:

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

dan saya ingin menjadi seperti ini

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

Saya ingin melakukan ini tanpa menggunakan properti backgroundatau background-image:di CSS.

html  css  image 
— Rakesh Juyal
sumber
1
Ini tampaknya akan dimungkinkan dalam CSS3: w3.org/TR/css3-values/#attribute
— graphicdivine
7
Sekarang mungkin. Diuji di Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
— Pacerier
2
Tetapi FireFox 30.0, Internet Explorer 11.0 tidak mendukung
— Laxmikant Dange
Solusi hanya CSS ini bekerja untuk saya (di semua browser): stackoverflow.com/a/19114098/448816 , dengan pengecualian saya harus menambahkan: 'ukuran latar belakang: 100%;'.
— mikhail-t
(2020) Anda dapat melakukannya dengan JS, getPropertyValue("--src")lihat: jsfiddle.net/CustomElementsExamples/vjfpu3a2
— Danny '365CSI' Engelman

Jawaban:

882

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

Solusi kerja penuh ( Live Demo):

<!doctype html>

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

<img class="MyClass123"/>
Luaskan cuplikan

Diuji dan bekerja:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Diuji dan Tidak berfungsi:

  • FireFox 40.0.2 (mengamati Alat Jaringan Pengembang, Anda dapat melihat bahwa URL memuat, tetapi gambar tidak ditampilkan)
  • Internet Explorer 11.0.9600.17905 (URL tidak pernah dimuat)
— Pacerier
sumber
7
@ gotqn, hanya Chrome Safari Opera sejauh ini.
— Pacerier
36
@ EricG, aplikasi yang berbeda memiliki persyaratan yang berbeda. Jika tidak sesuai dengan kebutuhan Anda, jangan gunakan itu. Jika ya, gunakan itu.
— Pacerier
4
Tidak bekerja IE10 adalah jalan keluar. Kami membuang IE7 (jangan bicara tentang IE6). IE8 juga, jika perlu. Tapi IE9 - IE10 ... tidak.
— Rolf
11
Layak menambahkan bahwa bahkan dalam browser yang mendukung menugaskan contentuntuk img, perubahan perilakunya. Gambar mulai mengabaikan atribut ukuran, dan di Chrome / Safari kehilangan opsi menu konteks seperti 'Simpan gambar'. Ini karena menetapkan contentkonversi yang efektif imgdari elemen yang diganti menjadi sesuatu seperti <span><img></span>.
— Ilya Streltsyn
3
tanpa dukungan browser yang tepat, saya tidak melihat ini sebagai jawaban yang valid, maaf.
— emachine
183

Ada solusi yang saya temukan hari ini (berfungsi di IE6 +, FF, Opera, Chrome):

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

Bagaimana itu bekerja:

  • Gambar menyusut hingga tidak lagi terlihat oleh lebar & tinggi.
  • Kemudian, Anda perlu 'mereset' ukuran gambar dengan padding. Yang ini menghasilkan gambar 16x16. Tentu saja Anda bisa menggunakan padding-left / padding-top untuk membuat gambar persegi panjang.
  • Akhirnya, gambar baru diletakkan di sana menggunakan latar belakang.
  • Jika gambar latar belakang baru terlalu besar atau terlalu kecil, saya sarankan menggunakan background-sizemisalnya: background-size:cover;yang sesuai gambar Anda ke ruang yang ditentukan.

Ini juga berfungsi untuk mengirimkan-input-gambar, mereka tetap dapat diklik.

Lihat demo langsung: http://www.audenaerde.org/csstricks.html#imagereplacecss

Nikmati!

— RobAu
sumber
6
@RobAnu: Ini bekerja dengan baik - jsfiddle
— TimPietrusky
9
Harus menyampaikan kepada Anda bahwa ini menarik dan pintar, tetapi DIV kosong lebih mudah.
— Volomike
11
Dalam hal ini. Namun ada beberapa kasus, di mana Anda tidak dapat mengontrol HTML dan ingin memanipulasi IMG. Di sana solusi ini juga akan berfungsi
— RobAu
2
Jika gambar memiliki srcatribut, ini adalah teknik yang Anda butuhkan. +1 - banyak membantu saya
— James Long
3
Tidak memberi peringkat pada jawaban ini, yang mungkin menjadi solusi untuk beberapa aplikasi, tetapi metode ini memiliki batasan. Anda tidak memiliki kendali atas dimensi rendering file gambar. Dalam penggunaan normal, Anda dapat mengontrol tinggi-lebar gambar, jika file tersebut ditentukan dalam sumber. Tapi ini pada dasarnya tidak berbeda dengan div dengan gambar latar, di mana jika div Anda lebih besar dari gambar, Anda kurang beruntung.
— TARKUS
114

Kumpulan metode yang mungkin untuk mengatur gambar dari CSS

CSS2 's :afterpseudo-elemen atau yang lebih baru sintaks ::afterdari CSS3 bersama dengan content:properti:

Rekomendasi W3C Pertama: Cascading Style Sheets, level 2 Spesifikasi CSS2 12 Mei 1998
Rekomendasi W3C Terbaru: Penyeleksi Level 3 Rekomendasi W3C 29 September 2011

Metode ini menambahkan konten setelahnya konten pohon dokumen elemen.

Catatan: beberapa browser secara eksperimental merender contentproperti secara langsung melalui beberapa pemilih elemen tanpa menghiraukan bahkan rekomendasi W3C terbaru yang mendefinisikan:

Berlaku untuk: :beforedan :afterelemen semu

Sintaks CSS2 (kompatibel untuk maju): 

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

Pemilih CSS3: 

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

Render default: Ukuran Asli (tidak tergantung pada deklarasi ukuran eksplisit)

Spesifikasi ini tidak sepenuhnya menentukan interaksi antara: sebelum dan: setelah dengan elemen yang diganti (seperti IMG dalam HTML). Ini akan didefinisikan secara lebih rinci dalam spesifikasi masa depan.

tetapi bahkan pada saat penulisan ini, perilaku dengan <IMG>tag masih belum ditentukan dan meskipun dapat digunakan dengan cara yang diretas dan tidak sesuai standar , penggunaan dengan <img>tidak dianjurkan !

Metode kandidat hebat, lihat kesimpulan ...

CSS1 'sbackground-image: properti:

Rekomendasi W3C Pertama: Cascading Style Sheets, level 1 17 Des 1996

Properti ini menetapkan gambar latar belakang suatu elemen. Saat mengatur gambar latar belakang, seseorang juga harus mengatur warna latar belakang yang akan digunakan ketika gambar tidak tersedia. Ketika gambar tersedia, itu dilapis di atas warna latar belakang.

Properti ini telah ada sejak awal CSS dan meskipun demikian layak disebutkan secara mulia.

Render default: Ukuran Asli (tidak dapat diskalakan, hanya diposisikan)

Namun ,

CSS3 'sbackground-size: properti meningkat di atasnya dengan memungkinkan beberapa pilihan skala:

Status W3C Terbaru: Rekomendasi Calon Latar Belakang dan Batas CSS Modul Level 3 9 September 2014

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

Tetapi bahkan dengan properti ini, itu tergantung pada ukuran kontainer.

Masih merupakan metode kandidat yang baik, lihat kesimpulan ...

CSS2 's list-style:properti bersama dengandisplay: list-item :

Rekomendasi W3C Pertama: Cascading Style Sheets, level 2 Spesifikasi CSS2 12 Mei 1998

list-style-image: properti mengatur gambar yang akan digunakan sebagai penanda item daftar (bullet)

Properti daftar menjelaskan pemformatan visual dasar daftar: mereka memungkinkan style sheet untuk menentukan jenis penanda ( gambar , mesin terbang, atau nomor)

display: list-item- Nilai ini menyebabkan elemen (misalnya, <li>dalam HTML) untuk menghasilkan kotak blok utama dan kotak penanda.

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

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

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

Render default: Ukuran Asli (tidak tergantung pada deklarasi ukuran eksplisit)

Pembatasan:

  • Warisan akan mentransfer nilai 'gaya daftar' dari elemen OL dan UL ke elemen LI. Ini adalah cara yang disarankan untuk menentukan informasi gaya daftar.

  • Mereka tidak mengizinkan penulis untuk menentukan gaya yang berbeda (warna, font, perataan , dll.) Untuk penanda daftar atau menyesuaikan posisinya

Metode ini juga tidak cocok untuk <img>tag karena konversi tidak dapat dilakukan antara tipe elemen, dan inilah hack yang terbatas dan tidak sesuai yang yang tidak berfungsi pada Chrome.

Metode kandidat yang baik, lihat kesimpulan ...

CSS3 's border-image:properti rekomendasi :

Status W3C Terbaru: Rekomendasi Calon Latar Belakang dan Batas CSS Modul Level 3 9 September 2014

Sebuah background-jenis metode yang mengandalkan menentukan ukuran dalam cara yang agak aneh (tidak didefinisikan untuk kasus penggunaan ini) dan sifat perbatasan mundur sejauh (misalnya. border: solid):

Perhatikan bahwa, meskipun tidak pernah menyebabkan mekanisme pengguliran, gambar awal mungkin masih terpotong oleh leluhur atau oleh viewport.

Contoh ini menggambarkan gambar yang dikomposisikan hanya sebagai hiasan sudut kanan bawah :

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

Berlaku untuk: Semua elemen, kecuali elemen tabel internal saat border-collapse: collapse

Masih tidak dapat mengubah suatu <img>tag 's src(tapi inilah hack ), sebaliknya kita bisa menghiasnya:

Tampilkan cuplikan kode

Metode kandidat yang baik harus dipertimbangkan setelah standar disebarkan.

CSS3 's element()notasi rancangan kerja bernilai menyebutkan juga:

Catatan: element()Fungsi hanya mereproduksi tampilan elemen yang dirujuk, bukan konten aktual dan strukturnya.

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

Kami akan menggunakan isi yang diberikan dari salah satu dari dua gambar yang tersembunyi untuk mengubah gambar latar belakang di #img1didasarkan pada ID Selector melalui CSS:

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

.hide {display: none}

Catatan: Ini eksperimental dan hanya berfungsi dengan -mozawalan di Firefox dan hanya lebih backgroundatau background-imageproperti, juga membutuhkan ukuran yang ditentukan.

Kesimpulan

  1. Setiap konten semantik atau informasi struktural masuk dalam HTML.
  2. Informasi gaya dan presentasi ditampilkan dalam CSS.
  3. Untuk tujuan SEO, jangan sembunyikan gambar yang bermakna di CSS.
  4. Grafik latar belakang biasanya dinonaktifkan saat mencetak.
  5. Tag khusus dapat digunakan dan ditata dari CSS, tetapi versi primitif dari Internet Explorer tidak mengerti] ( IE tidak mendesain tag HTML5 (dengan shiv) ) tanpa Javascript atau panduan CSS .
  6. SPA (Aplikasi Halaman Tunggal), dengan desain, biasanya menggabungkan gambar di latar belakang

Karena itu, mari kita jelajahi tag HTML yang cocok untuk tampilan gambar:

Itu <li> elemen [HTML4.01 +]

Penggunaan yang sempurna untuk list-style-image dengandisplay: list-item metode .

The <li>elemen, bisa kosong, memungkinkan konten mengalir dan itu bahkan diizinkan untuk menghilangkan </li>tag akhir.

Tampilkan cuplikan kode

Keterbatasan: sulit untuk ditata ( width:atau float:mungkin membantu)

The <figure>elemen [HTML5 +]

Elemen gambar mewakili beberapa konten aliran, opsional dengan keterangan, yang mandiri (seperti kalimat lengkap) dan biasanya direferensikan sebagai satu unit dari aliran utama dokumen.

Elemen ini valid tanpa konten, tetapi disarankan mengandung a <figcaption>.

Elemen dengan demikian dapat digunakan untuk membubuhi keterangan ilustrasi, diagram, foto , daftar kode, dll.

Perenderan default: elemen disejajarkan dengan benar, dengan bantalan kiri dan kanan!

The <object>elemen [HTML4 +]

Untuk memasukkan gambar, penulis dapat menggunakan elemen OBJECT atau elemen IMG.

The dataatribut yang diperlukan dan dapat memiliki valid tipe MIME sebagai nilai! 

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

Catatan: trik untuk menggunakan <object>tag dari CSS adalah dengan menetapkan MimeType yang valid kustomx-image/x diikuti oleh tidak ada data (nilai tidak memiliki data setelah koma yang diperlukan, )

Render default: 300 x 150px, tetapi ukuran dapat ditentukan dalam HTML atau CSS.

Itu <SVG> tag

Membutuhkan browser yang mampu SVG dan memiliki <image>elemen untuk gambar raster

The <canvas>elemen [HTML5 +].

The widthatribut default untuk 300 , dan heightdefault atribut untuk 150 .

Itu <input> elemen dengantype="image"

Keterbatasan:

... elemen tersebut akan muncul seperti tombol untuk menunjukkan bahwa elemen tersebut adalah sebuah tombol.

yang diikuti Chrome dan merender kotak kosong 4x4px saat tidak ada teks

Solusi sebagian, atur value=" ": 

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

Juga perhatikan <picture>elemen mendatang dalam HTML5.1 , yang saat ini merupakan konsep yang berfungsi .

— CSᵠ
sumber
(2020) Gunakan properti CSS: stackoverflow.com/questions/2182716/…
— Danny '365CSI' Engelman
Jawaban yang bagus tetapi menunjukkan kegagalan total web sebagai platform untuk menyediakan primitif dasar.
— serraosays
26

saya menggunakan solusi div kosong, dengan CSS ini:

#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
sumber
Bagaimana jika saya ingin menampilkannya sebaris? Menambahkan "display: inline" memberikan dimensi div saya 0x0 ...
— elsurudo
1
@elsurudo Gunakan tampilan: inline-block jika Anda ingin mengatur lebar dan tinggi pada elemen inline
— Erin Drummond
1
Jawaban teratas tidak berfungsi dengan Firefox, jadi saya lebih suka jawaban Anda! Dan itu jelas dan tidak memiliki hack css.
— Sergey Bogdanov
Jika Anda perlu menampilkan lebih dari satu gambar, ingatlah bahwa bidang id secara teknis dianggap unik, jadi gunakan pemilih kelas CSS dan bukan ID yang ideal.
— mix3d
Gambar jenis ini tidak akan dicetak dengan benar jika grafis latar belakangnya dimatikan dalam pengaturan cetak.
— posfan12
14

Saya menemukan cara yang lebih baik daripada solusi yang diusulkan, tetapi memang menggunakan gambar latar belakang. Metode yang sesuai (tidak dapat mengkonfirmasi untuk IE6) Kredit: 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;
}

Gambar lama tidak terlihat dan yang baru terlihat seperti yang diharapkan.


Solusi rapi berikut ini hanya berfungsi untuk webkit

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

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

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

}
— EricG
sumber
Ini adalah trik yang rapi, tetapi apakah ini benar-benar sesuai standar? The halaman W3C mengatakan contentproperti hanya berlaku untuk :beforedan :aftersemu kelas. Juga, jika Anda harus mendukung IE7 atau sebelumnya, saya pikir contentdukungan tidak ada. Tetap saja, sangat menggoda.
— jatrim
Anda benar, saya baru saja menemukan metode yang lebih sesuai. Memperbarui posting saya! Sekarang pilih saya;) Haha.
— EricG
Pendekatan yang diperbarui jelas lebih baik daripada pendekatan yang mengandalkan konten. Terima kasih telah menyertakan tautan asli. Itu sangat mendalam. Anda akan mencatat bahwa jawaban @ RobAu sebenarnya sangat mirip dengan versi Anda yang diperbarui juga.
— jatrim
1
@jatrim contentProperti ini berlaku untuk semua elemen. http://www.w3.org/TR/css3-content/#content
— XP1
13

Mereka benar. IMG adalah elemen konten dan CSS adalah tentang desain. Tapi, bagaimana kalau Anda menggunakan beberapa elemen konten atau properti untuk tujuan desain? Saya memiliki IMG di seluruh halaman web saya yang harus diubah jika saya mengubah gaya (CSS).

Nah ini adalah solusi untuk mendefinisikan presentasi IMG (tidak benar-benar gambar) dalam gaya CSS.

  1. buat gif atau png transparan 1x1.
  2. Tetapkan "src" IMG ke gambar itu.
  3. Tentukan presentasi akhir dengan "background-image" dalam gaya CSS.

Ini bekerja seperti pesona :)

— jujur
sumber
5
-1 Meskipun jawaban Anda tidak buruk, ia secara khusus menyebutkan bahwa ia tidak ingin menggunakanbackground*
— fresskoma
1
ini adalah trik ... dalam pendapat saya trik akan diubah oleh browser ... dan suatu hari di pagi hari Anda akan melihat neraka di situs web Anda: D :)))
— Mahdi Jazini
11

Berikut ini adalah solusi yang sangat baik -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro dan Kontra:
(+) bekerja dengan vektor image yang memiliki relatif lebar / tinggi (hal yang Robau 's jawabannya tidak menangani)
(+) adalah cross browser yang (juga bekerja untuk IE8 +)
(+) hanya menggunakan CSS. Jadi tidak perlu memodifikasi img src (atau jika Anda tidak memiliki akses / tidak ingin mengubah atribut img src yang sudah ada).
(-) maaf, itu memang menggunakan atribut latar belakang css :)

— OviC
sumber
Nah, itu solusi yang tepat, bekerja untuk saya di semua browser, terima kasih !! Juga layak untuk disebutkan saya harus menambahkan: ukuran latar belakang: 100%; untuk css class dalam solusi di atas untuk membuat gambar pengganti ditampilkan dengan benar.
— mikhail-t
9

Anda dapat menentukan 2 gambar dalam kode HTML Anda dan gunakan display: none;untuk memutuskan mana yang akan terlihat.

— Kostas Andrianopoulos
sumber
Saya mencari solusi yang responsif Web tetapi juga memelihara SEO. Saya ingin menggunakan kueri media dalam CSS untuk mengubah gambar saya tergantung pada perangkat yang digunakan, tetapi saya ingin menyimpan konten saya dalam HTML. Mendeklarasikan sumber dalam CSS adalah rute yang tidak ingin saya ambil, jadi background-imagebukan pilihan. Saya ingin imgtag untuk keperluan SEO. Jawaban Anda sangat sederhana, elegan, dan menyelesaikan semua rintangan saya! bravo! Pengguna juga tidak perlu mengunduh kedua gambar. Selanjutnya, saya dapat menambahkan sejumlah gambar.
— Xavier
Setiap jawaban yang saya baca sejauh ini akan memaksa saya untuk mendeklarasikan sumber saya di stylesheet saya, atau menggunakan inline CSS di markup saya. Tidak ada yang saya senangi. Kode berantakan!
— Xavier
7

Tidak, Anda tidak dapat mengatur atribut src gambar melalui CSS. Yang paling dekat yang bisa Anda dapatkan adalah, seperti yang Anda katakan, backgroundatau background-image. Saya tidak akan merekomendasikan melakukan itu karena itu akan agak tidak masuk akal.

Namun, ada solusi CSS3 yang tersedia untuk Anda, jika browser yang Anda targetkan dapat menggunakannya. Gunakan content:url seperti yang dijelaskan dalam jawaban Pacerier . Anda dapat menemukan solusi lintas peramban lain dalam jawaban lain di bawah ini.

— cletus
sumber
1
mengapa memilih bawah? jawaban ini lebih akurat daripada jawaban yang diterima.
— harsimranb
1
Jawaban terbaik sejauh ini: TIDAK, Anda tidak dapat melakukannya dengan CSS.
— Milche Patern
4

Masukkan beberapa gambar dalam wadah "pengontrol", dan ganti kelas wadahnya. Di CSS, tambahkan aturan untuk mengelola visibilitas gambar tergantung pada kelas wadah. Ini akan menghasilkan efek yang sama dengan mengubah img srcproperti dari satu gambar.

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

Perhatikan bahwa ini akan memuat semua gambar, seperti dengan CSS backround-image, tetapi tidak seperti mengubah img srcmelalui JS.

— Bronx
sumber
3

Cara alternatif

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

Beberapa data akan saya tinggalkan dalam HTML, tetapi lebih baik untuk mendefinisikan src di CSS:

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

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

Sejauh yang saya ketahui, ANDA TIDAK BISA. CSS adalah tentang gaya dan gambar src adalah konten.

— NawaMan
sumber
3
Saat ini, cukup sering gambar ada di sana hanya untuk menata halaman.
— Lorenzo Polidori
2
Implikasinya adalah bahwa mungkin ada perbedaan antara gambar yang digunakan sebagai batas, latar belakang dll dan yang sebenarnya merupakan bagian dari konten halaman yaitu. diagram, artikel foto dll.
— Rhys van der Waerden
1
ANDA BISA, dan ada kasus umum yang valid yang Anda inginkan.
— ryan0
2

Untuk menegaskan kembali solusi sebelumnya dan untuk menekankan implementasi CSS murni di sini adalah jawaban saya.

Solusi Pure CSS diperlukan dalam kasus di mana Anda mencari konten dari situs lain, dan karenanya Anda tidak memiliki kendali atas HTML yang dikirimkan. Dalam kasus saya, saya mencoba untuk menghapus branding dari konten sumber yang dilisensikan sehingga pemegang lisensi tidak harus beriklan untuk perusahaan tempat mereka membeli konten tersebut. Karena itu, saya menghapus logo mereka sambil menyimpan yang lainnya. Saya harus mencatat bahwa ini adalah kontrak klien saya untuk melakukannya.

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

Saya tahu ini adalah pertanyaan yang sangat lama namun tidak ada jawaban yang memberikan alasan yang tepat mengapa hal ini tidak dapat dilakukan. Meskipun Anda dapat "melakukan" apa yang Anda cari, Anda tidak dapat melakukannya dengan cara yang valid. Untuk memiliki tag img yang valid, harus memiliki atribut src dan alt.

Jadi, salah satu jawaban yang memberikan cara untuk melakukan ini dengan tag img yang tidak menggunakan atribut src mempromosikan penggunaan kode yang tidak valid.

Singkatnya: apa yang Anda cari tidak dapat dilakukan secara legal dalam struktur sintaksis.

Sumber: W3 Validator

— Geowil
sumber
2

Atau Anda bisa melakukan ini yang saya temukan di interweb thingy.

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

Jadi secara efektif menyembunyikan gambar dan mengisi latar belakang. Oh, betapa hacknya tetapi jika Anda menginginkan tag IMG dengan teks alt dan latar belakang yang dapat menskala tanpa menggunakan JavaScript?

Dalam sebuah proyek yang sedang saya kerjakan sekarang saya membuat templat ranting blok pahlawan

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

Jika Anda tidak ingin mengatur properti latar belakang maka Anda tidak dapat mengatur atribut src dari suatu gambar hanya menggunakan CSS.

Atau Anda dapat menggunakan JavaScript untuk melakukan hal seperti itu.

— Guillaume Flandre
sumber
1

Anda dapat mengonversinya dengan JS:

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

Jika Anda mencoba untuk menambahkan gambar di tombol secara dinamis berdasarkan konteks proyek Anda, Anda dapat menggunakan? ambil untuk referensi sumber berdasarkan hasil. Di sini saya menggunakan desain mvvm untuk membiarkan nilai Model.Phases [0] saya menentukan apakah saya ingin tombol saya diisi dengan gambar bola lampu yang hidup atau mati berdasarkan nilai fase cahaya.

Tidak yakin apakah ini membantu. Saya menggunakan JqueryUI, Blueprint, dan CSS. Definisi kelas harus memungkinkan Anda untuk mendesain tombol berdasarkan apa pun yang Anda inginkan.

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

Saya akan menambahkan ini: gambar latar belakang juga dapat diposisikan dengan background-position: x y;(x horizontal y vertikal). (..) Kasing saya, CSS:

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

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

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

Saya sudah belajar html sepulang sekolah selama beberapa hari, dan ingin tahu bagaimana melakukan ini. Menemukan latar belakang dan kemudian menempatkan 2 dan 2 bersama-sama. Ini bekerja 100% saya periksa, jika tidak pastikan Anda mengisi hal-hal yang diperlukan !!! Kita perlu menentukan ketinggian, karena tanpanya tidak akan ada apa-apa !!! Saya akan meninggalkan shell dasar ini yang bisa Anda tambahkan.

Contoh:

 <!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 Ya saya pengguna Linux;)

— Z_Doctor
sumber
0

Metode apa pun yang didasarkan pada backgroundatau background-imagekemungkinan gagal ketika pengguna mencetak dokumen dengan " warna latar belakang cetak dan gambar " dinonaktifkan. Sayangnya ini adalah tipikal browser standar.

Satu-satunya metode yang kompatibel dengan cetak dan lintas-browser di sini adalah metode yang diusulkan oleh Bronx.

— Simon Rozman
sumber
0

Memuat IMG src dari definisi CSS, menggunakan properti CSS modern

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

  • srcdefinisi kosong pada <IMG> memicu penangan onerror: fungsi loadIMG
  • Fungsi loadIMG menghitung nilai CSS
  • menghapus semua karakter ilegal
  • mengatur IMG.src
  • ketika CSS berubah, gambar TIDAK diperbarui! Anda harus memanggil loadIMG lagi

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

SO jawaban terkait: WCPROPS

— Danny '365CSI' Engelman
sumber
-3

Cukup gunakan HTML5 :) 

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
— Maks
sumber
OP secara khusus mencari untuk membersihkan markup HTML mereka dengan solusi CSS. Jawaban ini hanya akan semakin mengacaukan markup.
— webaholik
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.