532

เป็นไปได้ไหมที่จะตั้งค่าsrcคุณลักษณะใน CSS? ในปัจจุบันสิ่งที่ฉันทำคือ:

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

และฉันต้องการให้มันเป็นอย่างนี้

<img class="myClass" />

.myClass {
    some-src-property: url("pathTo/myImage.jpg");

ฉันต้องการทำสิ่งนี้โดยไม่ใช้backgroundหรือbackground-image:คุณสมบัติใน CSS

html css image

— Rakesh Juyal
แหล่งที่มา

1

เห็นได้ชัดว่าเป็นไปได้ใน CSS3: w3.org/TR/css3-values/#attribute

— graphicdivine

7

มันเป็นไปได้แล้ว ทดสอบกับ Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951

— Pacerier

2

แต่ FireFox 30.0, Internet Explorer 11.0 ไม่รองรับ

— Laxmikant Dange

โซลูชัน CSS นี้ใช้งานได้สำหรับฉันเท่านั้น (ในเบราว์เซอร์ทั้งหมด): stackoverflow.com/a/19114098/448816ยกเว้นว่าฉันต้องเพิ่ม: 'background-size: 100%;'

— mikhail-t

(2020) คุณสามารถทำได้ด้วย JS getPropertyValue("--src")โปรดดู: jsfiddle.net/CustomElementsExamples/vjfpu3a2

— Danny '365CSI' Engelman

881

content:url("image.jpg")ใช้

วิธีการทำงานแบบเต็ม ( Live Demo):

<!doctype html>

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

<img class="MyClass123"/>

ขยายตัวอย่างข้อมูล

ผ่านการทดสอบและทำงาน:

Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6

ผ่านการทดสอบและไม่ทำงาน:

FireFox 40.0.2 (การสังเกตเครื่องมือนักพัฒนาเครือข่ายคุณจะเห็นว่า URL โหลด แต่ภาพไม่ปรากฏขึ้น)
Internet Explorer 11.0.9600.17905 (URL ไม่เคยโหลด)

— Pacerier
แหล่งที่มา

7

@gotqn มีเพียง Chrome Safari Opera เท่านั้น

— Pacerier

36

@EricG แอปพลิเคชันที่แตกต่างกันมีข้อกำหนดที่แตกต่างกัน ถ้ามันไม่เหมาะกับความต้องการของคุณอย่าใช้มัน ถ้าเป็นเช่นนั้นใช้มัน

— Pacerier

4

ไม่ทำงาน IE10 ไม่ต้องไปเลย เราทิ้ง IE7 (อย่าพูดถึง IE6) IE8 เช่นกันหากจำเป็น แต่ IE9 - IE10 ... ไม่

— Rolf

11

คุ้มค่าที่จะเพิ่มว่าแม้ในเบราว์เซอร์ที่รองรับการกำหนดcontentให้imgมันเปลี่ยนพฤติกรรมของมัน ภาพเริ่มละเว้นขนาดคุณลักษณะและใน Chrome / Safari จะสูญเสียตัวเลือกเมนูบริบทเช่น 'บันทึกภาพ' เพราะนี่คือการกำหนดcontentอย่างมีประสิทธิภาพแปลงimgจากแทนที่ว่าง<span><img></span>องค์ประกอบบางอย่างเช่น

— Ilya Streltsyn

3

หากไม่มีการสนับสนุนเบราว์เซอร์ที่เหมาะสมฉันไม่เห็นว่านี่เป็นคำตอบที่ถูกต้องขออภัย

— emachine

183

มีวิธีแก้ปัญหาที่ฉันค้นพบในวันนี้ (ทำงานใน IE6 +, FF, Opera, Chrome):

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

มันทำงานอย่างไร:

รูปภาพหดตัวจนกว่าจะไม่เห็นความกว้างและความสูงอีกต่อไป
จากนั้นคุณต้อง 'รีเซ็ต' ขนาดภาพด้วยการแพ็ดดิ้ง ภาพนี้ให้ภาพขนาด 16x16 แน่นอนคุณสามารถใช้การเสริมด้านซ้าย / ด้านบนเสริมเพื่อสร้างภาพสี่เหลี่ยม
ในที่สุดภาพใหม่จะถูกวางไว้ที่นั่นโดยใช้พื้นหลัง
หากภาพพื้นหลังใหม่มีขนาดใหญ่เกินไปหรือเล็กเกินไปฉันขอแนะนำให้ใช้background-sizeตัวอย่างเช่น: background-size:cover;ซึ่งจะทำให้รูปภาพของคุณเหมาะกับพื้นที่ที่กำหนด

นอกจากนี้ยังใช้งานได้กับ submit-input-images ซึ่งสามารถคลิกได้

ดูตัวอย่างสด: http://www.audenaerde.org/csstricks.html#imagereplacecss

สนุก!

— RobAu
แหล่งที่มา

6

@RobAnu: มันทำงานได้ค่อนข้างดี - jsfiddle

— TimPietrusky

9

ต้องบอกกับคุณว่านี่เป็นสิ่งที่น่าสนใจและฉลาด แต่ DIV ที่ว่างเปล่านั้นตรงไปตรงมามากกว่า

— Volomike

11

ในกรณีนี้มันเป็น อย่างไรก็ตามมีหลายกรณีที่คุณไม่สามารถควบคุม HTML และต้องการจัดการ IMG อย่างไรก็ตาม มีวิธีแก้ปัญหานี้จะทำงาน

— RobAu

2

หากภาพมีsrcคุณสมบัตินี้เป็นเทคนิคที่คุณต้องการ +1 - ช่วยฉันได้มาก

— James Long

3

ไม่ได้จัดอันดับคำตอบนี้ซึ่งอาจเป็นวิธีแก้ปัญหาสำหรับบางแอปพลิเคชัน แต่วิธีนี้มีข้อ จำกัด คุณไม่สามารถควบคุมขนาดของการแสดงผลของไฟล์ภาพได้ ในการใช้งานปกติคุณสามารถควบคุมความสูงของรูปภาพได้หากไฟล์นั้นถูกระบุในแหล่งที่มา แต่โดยทั่วไปไม่แตกต่างจาก div ที่มีภาพพื้นหลังหาก div ของคุณใหญ่กว่าภาพคุณก็โชคไม่ดี

— ทาร์คุส

113

ชุดของวิธีการที่เป็นไปได้ในการตั้งค่ารูปภาพจาก CSS

:afterองค์ประกอบเทียมของCSS2หรือไวยากรณ์ที่ใหม่กว่า ::afterจากCSS3พร้อมด้วยcontent:คุณสมบัติ:

_{คำแนะนำ W3C ครั้งแรก: สไตล์ชีทแบบเรียงซ้อนระดับ 2 ข้อมูลจำเพาะ CSS2 12 พฤษภาคม 2541}
^{คำแนะนำ W3C ล่าสุด: ตัวเลือกระดับ 3 คำแนะนำ W3C 29 กันยายน 2554}

วิธีการนี้จะต่อท้ายเนื้อหาหลังเนื้อหาเอกสารขององค์ประกอบ

หมายเหตุ: เบราว์เซอร์บางการทดลองทำให้contentคุณสมบัติโดยตรงกว่าบางเตอร์องค์ประกอบไม่คำนึงถึงแม้แต่คำแนะนำ W3C ล่าสุดที่กำหนด:

ใช้กับ: :beforeและ:afterองค์ประกอบแบบหลอก

ไวยากรณ์ CSS2 (เข้ากันได้กับฟอร์เวิร์ด):

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

ตัวเลือก CSS3:

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

การแสดงผลเริ่มต้น: ขนาดดั้งเดิม (ไม่ได้ขึ้นอยู่กับการประกาศขนาดที่ชัดเจน)

ข้อมูลจำเพาะนี้ไม่ได้กำหนดการโต้ตอบของ: before และ: after ด้วยองค์ประกอบที่ถูกแทนที่ (เช่น IMG ใน HTML) จะมีการกำหนดรายละเอียดเพิ่มเติมในสเปคในอนาคต

แต่แม้ในขณะที่เขียนนี้พฤติกรรมที่มี<IMG>แท็กยังคงไม่ได้กำหนดไว้และแม้ว่ามันจะสามารถนำมาใช้ในทางที่ถูกแฮ็กและมาตรฐานที่ไม่สอดคล้อง , การใช้งานด้วย<img>ไม่แนะนำ !

วิธีการสมัครที่ยอดเยี่ยมดูข้อสรุป ...

background-image:คุณสมบัติของCSS1 :

^{คำแนะนำ W3C ครั้งแรก: สไตล์ชีทซ้อนระดับ 1 17 ธันวาคม 2539}

คุณสมบัตินี้ตั้งค่าภาพพื้นหลังขององค์ประกอบ เมื่อตั้งค่าภาพพื้นหลังหนึ่งควรตั้งค่าสีพื้นหลังที่จะใช้เมื่อภาพไม่พร้อมใช้งาน เมื่อรูปภาพพร้อมใช้งานจะมีการซ้อนทับด้านบนของสีพื้นหลัง

สถานที่ให้บริการนี้ได้รับรอบจากจุดเริ่มต้นของ CSS และอย่างไรก็ตามมันสมควรได้รับการกล่าวถึงอันรุ่งโรจน์

การแสดงผลเริ่มต้น: ขนาดดั้งเดิม (ไม่สามารถปรับขนาดได้เฉพาะตำแหน่ง)

อย่างไรก็ตาม ,

background-size:คุณสมบัติของCSS3ได้รับการปรับปรุงให้ดีขึ้นโดยการอนุญาตให้ปรับขนาดได้หลายตัวเลือก

^{สถานะ W3C ล่าสุด: พื้นหลังและขอบเขต CSS คำแนะนำผู้สมัคร ระดับ 3 9 กันยายน 2014}

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

แต่ถึงแม้จะมีคุณสมบัตินี้ก็ขึ้นอยู่กับขนาดของภาชนะ

ยังเป็นวิธีการสมัครที่ดีดูข้อสรุป ...

list-style:คุณสมบัติของCSS2พร้อมกับdisplay: list-item:

^{คำแนะนำ W3C ครั้งแรก: สไตล์ชีทแบบเรียงซ้อน, ข้อมูลจำเพาะ CSS2 ระดับ 2 12 พฤษภาคม 1998}

list-style-image: property กำหนดอิมเมจที่จะใช้เป็น marker item list (bullet)

คุณสมบัติของรายการอธิบายถึงการจัดรูปแบบรายการภาพพื้นฐาน: อนุญาตให้สไตล์ชีทระบุประเภทของตัวทำเครื่องหมาย ( รูปภาพสัญลักษณ์หรือหมายเลข)

display: list-item- ค่านี้ทำให้องค์ประกอบ (เช่นเป็น<li>HTML) เพื่อสร้างกล่องบล็อกหลักและกล่องทำเครื่องหมาย

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

CSS ชวเลข: ( <list-style-type> <list-style-position> <list-style-image>)

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

การแสดงผลเริ่มต้น: ขนาดดั้งเดิม (ไม่ได้ขึ้นอยู่กับการประกาศขนาดที่ชัดเจน)

ข้อ จำกัด:

การสืบทอดจะโอนค่า 'รายการสไตล์' จากองค์ประกอบ OL และ UL ไปยังองค์ประกอบ LI นี่เป็นวิธีที่แนะนำในการระบุข้อมูลสไตล์รายการ
พวกเขาไม่อนุญาตให้ผู้เขียนระบุสไตล์ที่แตกต่าง (สีแบบอักษรการจัดตำแหน่งฯลฯ ) สำหรับตัวทำเครื่องหมายรายการหรือปรับตำแหน่ง

วิธีนี้ยังไม่เหมาะกับ<img>แท็กเนื่องจากไม่สามารถทำการแปลงระหว่างประเภทองค์ประกอบและนี่คือแฮ็คที่จำกัด และไม่เข้ากันได้และไม่ทำงานบน Chrome

วิธีการสมัครที่ดีดูข้อสรุป ...

คำแนะนำborder-image:คุณสมบัติของCSS3 :

^{สถานะ W3C ล่าสุด: พื้นหลังและขอบเขต CSS คำแนะนำผู้สมัคร ระดับ 3 9 กันยายน 2014}

พื้นหลังชนิดวิธีการที่อาศัยการระบุขนาดในลักษณะที่ค่อนข้างแปลกประหลาด(ไม่ได้กำหนดไว้สำหรับกรณีการใช้งานนี้)และคุณสมบัติชายแดนทางเลือกเพื่อให้ห่างไกล (เช่น. border: solid):

โปรดทราบว่าแม้ว่าพวกเขาจะไม่ทำให้เกิดกลไกการเลื่อนภาพที่เริ่มต้นอาจยังคงถูกตัดโดยบรรพบุรุษหรือวิวพอร์ต

ตัวอย่างนี้แสดงให้เห็นภาพที่ถูกสร้างขึ้นเป็นมุมล่างขวาเท่านั้นตกแต่ง:

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

ใช้กับ: องค์ประกอบทั้งหมดยกเว้นองค์ประกอบตารางภายในเมื่อ border-collapse: collapse

ก็ยังไม่สามารถเปลี่ยน<img>แท็ก 's src( แต่ที่นี่เป็นสับ ) แทนเราสามารถตกแต่ง:

แสดงตัวอย่างโค้ด

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

ขยายตัวอย่างข้อมูล

วิธีการสมัครที่ดีจะได้รับการพิจารณาหลังจากเผยแพร่มาตรฐาน

CSS3 'selement()ร่างการทำงานสัญกรณ์นั้นมีค่าควรแก่การกล่าวถึงด้วย:

หมายเหตุ: element()ฟังก์ชั่นทำซ้ำลักษณะที่ปรากฏขององค์ประกอบอ้างอิงเท่านั้นไม่ใช่เนื้อหาจริงและโครงสร้าง

<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ขึ้นอยู่กับID เลือกผ่านทาง CSS:

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

.hide {display: none}

หมายเหตุ: เป็นการทดลองและใช้งานได้เฉพาะกับ-mozคำนำหน้าใน Firefox และมากกว่าเท่านั้นbackgroundหรือbackground-imageยังต้องระบุขนาดด้วย

องค์ประกอบ () การสาธิตสด

สรุปผลการวิจัย

เนื้อหาความหมายหรือโครงสร้างข้อมูลใด ๆ ไปใน HTML
ข้อมูลการออกแบบและการนำเสนอเป็นไปใน CSS
เพื่อวัตถุประสงค์ SEO อย่าซ่อนภาพที่มีความหมายใน CSS
กราฟิกพื้นหลังมักจะปิดการใช้งานเมื่อพิมพ์
แท็กที่กำหนดเองสามารถนำมาใช้และสไตล์จาก CSS แต่ดั้งเดิมรุ่นของ Internet Explorer ไม่เข้าใจ] ( IE ไม่จัดแต่งทรงผมแท็ก HTML5 (กับชีฟ) ) โดยไม่ Javascript หรือ CSS คำแนะนำ
สปา (แอปพลิเคชั่นหน้าเดียว) โดยการออกแบบมักจะรวมภาพในพื้นหลัง

ต้องบอกว่ามาสำรวจแท็ก HTML ที่เหมาะกับการแสดงภาพ:

`<li>`องค์ประกอบ [HTML4.01 +]

กรณีที่สมบูรณ์แบบlist-style-imageด้วยdisplay: list-itemวิธีการ

<li>องค์ประกอบสามารถเป็นที่ว่างเปล่าช่วยให้เนื้อหาการไหลและจะได้รับอนุญาตได้ที่จะละเว้น</li>แท็กสิ้นสุด

แสดงตัวอย่างโค้ด

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

ขยายตัวอย่างข้อมูล

ข้อ จำกัด : ยากต่อสไตล์ ( width:หรือfloat:อาจช่วยได้)

`<figure>`องค์ประกอบ [HTML5 +]

องค์ประกอบรูปที่แสดงถึงเนื้อหาการไหลบางส่วนเลือกที่มีคำบรรยายภาพที่อยู่ในตัวเอง (เช่นประโยคที่สมบูรณ์) และโดยทั่วไปจะมีการอ้างอิงเป็นหน่วยเดียวจากการไหลหลักของเอกสาร

องค์ประกอบที่ถูกต้องที่มีเนื้อหาไม่ <figcaption>แต่จะแนะนำให้มี

องค์ประกอบนี้สามารถใช้ในการใส่คำอธิบายประกอบภาพประกอบไดอะแกรมรูปภาพรายการรหัส ฯลฯ

การเรนเดอร์เริ่มต้น: องค์ประกอบนั้นจัดชิดขวาทั้งซ้ายและขวาแพ็ด!

การสาธิตสดรูป

`<object>`องค์ประกอบ [HTML4 +]

ในการรวมรูปภาพผู้แต่งอาจใช้องค์ประกอบ OBJECT หรือองค์ประกอบ IMG

ต้องdataระบุแอตทริบิวต์และสามารถมีประเภท MIME ที่ถูกต้องเป็นค่า!

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

หมายเหตุ: เคล็ดลับในการใช้ประโยชน์จาก<object>แท็กจาก CSS คือการตั้งค่า MimeType ที่ถูกต้องที่กำหนดเองx-image/xตามด้วยไม่มีข้อมูล (ค่าไม่มีข้อมูลหลังจากเครื่องหมายจุลภาคที่จำเป็น,)

การแสดงผลเริ่มต้น: 300 x 150px แต่สามารถระบุขนาดได้ใน HTML หรือ CSS

วัตถุประสงค์การสาธิตสด

`<SVG>`แท็ก

ต้องการเบราว์เซอร์ที่ทำงานได้SVG และมี <image>องค์ประกอบสำหรับภาพแรสเตอร์

SVG การสาธิตสด

`<canvas>`องค์ประกอบ [HTML5 +]

widthแอตทริบิวต์เริ่มต้นที่300และheightค่าเริ่มต้นแอตทริบิวต์150

ผ้าใบสาธิตสด

`<input>`องค์ประกอบด้วย`type="image"`

ข้อ จำกัด :

... องค์ประกอบนั้นคาดว่าจะมีลักษณะคล้ายปุ่มเพื่อระบุว่าองค์ประกอบนั้นเป็นปุ่ม

Chrome ตัวใดที่ติดตามและแสดงผลสี่เหลี่ยมจัตุรัสขนาด 4x4px เมื่อไม่มีข้อความ

โซลูชันบางส่วนชุดvalue=" ":

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

INPUT type = image Live Demo

ระวัง<picture>องค์ประกอบที่จะเกิดขึ้นในHTML5.1ซึ่งเป็นร่างที่ใช้งานได้ในปัจจุบัน

— CSᵠ
แหล่งที่มา

(2020) ใช้คุณสมบัติ CSS: stackoverflow.com/questions/2182716/…

— Danny '365CSI' Engelman

คำตอบที่ยอดเยี่ยม แต่แสดงให้เห็นถึงความล้มเหลวอย่างสมบูรณ์ของเว็บในฐานะแพลตฟอร์มเพื่อให้บริการพื้นฐานเบื้องต้น

— serraosays

26

ฉันใช้ทางออก div ที่ว่างเปล่าด้วย 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
แหล่งที่มา

ถ้าฉันต้องการแสดงแบบอินไลน์ การเพิ่ม "display: inline" ให้มิติ div ของฉันเท่ากับ 0x0 ...

— elsurudo

1

@elsurudo ใช้ display: inline-block ถ้าคุณต้องการตั้งค่าความกว้างและความสูงในองค์ประกอบอินไลน์

— Erin Drummond

1

คำตอบยอดนิยมใช้ไม่ได้กับ Firefox ดังนั้นฉันชอบคำตอบของคุณมากกว่านี้! และเป็นที่ชัดเจนและไม่มี css hacks

— Sergey Bogdanov

หากคุณต้องการแสดงมากกว่าหนึ่งภาพโปรดจำไว้ว่าเขตข้อมูล id นั้นควรเป็นเทคนิคที่ไม่ซ้ำกันดังนั้นการใช้ตัวเลือกคลาส CSS แทนรหัสจะเหมาะที่สุด

— mix3d

รูปภาพประเภทนี้จะพิมพ์ไม่ถูกต้องหากคุณปิดกราฟิกพื้นหลังในการตั้งค่าการพิมพ์

— posfan12

14

ฉันพบวิธีที่ดีกว่าโซลูชันที่เสนอ แต่จะใช้ภาพพื้นหลังแน่นอน วิธีการมาตรฐาน (ไม่สามารถยืนยันสำหรับ IE6) เครดิต: 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;
}

ไม่เห็นภาพเก่าและภาพใหม่ดังที่คาดไว้

โซลูชันที่เป็นระเบียบต่อไปนี้ใช้ได้กับ webkit เท่านั้น

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

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

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

}

— EricG
แหล่งที่มา

นี่เป็นเคล็ดลับที่เรียบร้อย แต่เป็นไปตามมาตรฐานจริงหรือ หน้า W3Cกล่าวว่าcontentคุณสมบัติที่จะใช้กับ:beforeและ:afterเรียนหลอก นอกจากนี้หากคุณต้องรองรับ IE7 หรือก่อนหน้านี้ฉันคิดว่าcontentการสนับสนุนนั้นไม่มีอยู่จริง ยังคงดึงดูดมาก

— jatrim

คุณพูดถูกฉันเพิ่งพบวิธีการที่สอดคล้องมากกว่านี้ กำลังอัปเดตโพสต์ของฉัน! ตอนนี้ให้คะแนนฉัน;) ฮ่าฮ่า

— EricG

วิธีการที่ได้รับการปรับปรุงนั้นดีกว่าการใช้เนื้อหาเป็นอย่างมาก ขอขอบคุณที่รวมลิงก์เดิมไว้ด้วย นั่นลึกซึ้ง คุณจะทราบว่าคำตอบของ @ RobAu นั้นคล้ายกับเวอร์ชันที่อัปเดตของคุณเช่นกัน

— jatrim

1

@jatrim contentคุณสมบัตินี้ใช้กับองค์ประกอบทั้งหมด http://www.w3.org/TR/css3-content/#content

— XP1

13

พวกเขาพูดถูก IMG เป็นองค์ประกอบเนื้อหาและ CSS เป็นเรื่องเกี่ยวกับการออกแบบ แต่เมื่อคุณใช้องค์ประกอบเนื้อหาหรือคุณสมบัติบางอย่างเพื่อการออกแบบ ฉันมี IMG ในหน้าเว็บของฉันที่ต้องเปลี่ยนถ้าฉันเปลี่ยนสไตล์ (CSS)

นี่เป็นโซลูชันสำหรับการกำหนดงานนำเสนอ IMG (ไม่มีภาพ) ในสไตล์ CSS

สร้าง 1x1 gif โปร่งใสหรือ png
กำหนด "src" ที่เหมาะสมของ IMG ให้กับรูปภาพนั้น
กำหนดงานนำเสนอขั้นสุดท้ายด้วย "background-image" ในสไตล์ CSS

มันใช้งานได้เหมือนมีเสน่ห์ :)

— ตรงไปตรงมา
แหล่งที่มา

5

-1 แม้ว่าคำตอบของคุณจะไม่เลว แต่เขาก็กล่าวว่าเขาไม่ต้องการใช้โดยเฉพาะbackground*

— fresskoma

1

นี่เป็นกลลวง ... ในความเห็นของฉันกลเม็ดเคล็ดลับจะถูกเปลี่ยนโดยเบราว์เซอร์ ... และในตอนเช้าคุณจะเห็นนรกในเว็บไซต์ของคุณ: D :)))

— Mahdi Jazini

11

นี่เป็นวิธีแก้ปัญหาที่ดีมาก -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro (s) และ Con (s):
(+) ทำงานกับเวกเตอร์ ภาพที่มีความกว้าง / ความสูงสัมพัทธ์ (สิ่งที่คำตอบของRobAuไม่สามารถทำได้)
(+) เป็นเบราว์เซอร์ข้าม (ใช้ได้กับ IE8 +)
(+) ใช้ CSS เท่านั้น ดังนั้นไม่จำเป็นต้องแก้ไข img src (หรือถ้าคุณไม่มีการเข้าถึง / ไม่ต้องการเปลี่ยนแอตทริบิวต์ img src ที่มีอยู่แล้ว)
(-) ขออภัยมันใช้แอตทริบิวต์ css พื้นหลัง :)

— OviC
แหล่งที่มา

ตอนนี้นั่นเป็นทางออกที่เหมาะสมใช้งานได้กับฉันในทุกเบราว์เซอร์ขอบคุณ !! นอกจากนี้ยังมีมูลค่าการกล่าวถึงฉันต้องเพิ่ม: ขนาดพื้นหลัง: 100%; ไปที่ css class ในโซลูชันด้านบนเพื่อให้ภาพที่แสดงแทนถูกต้อง

— mikhail-t

9

คุณสามารถกำหนด 2 ภาพในรหัส HTML ของคุณและใช้display: none;ในการตัดสินใจว่าจะให้ภาพใดปรากฏ

— Kostas Andrianopoulos
แหล่งที่มา

ฉันกำลังค้นหาโซลูชั่นที่ตอบสนองต่อเว็บอย่างกว้างขวางและกว้างไกล แต่ก็ดูแล SEO ด้วย ฉันต้องการใช้คิวรี่สื่อใน CSS เพื่อเปลี่ยนภาพของฉันขึ้นอยู่กับอุปกรณ์ที่ใช้ แต่ฉันต้องการเก็บเนื้อหาไว้ใน HTML การประกาศแหล่งที่มาใน CSS เป็นเส้นทางที่ฉันไม่ต้องการใช้ดังนั้นจึงbackground-imageไม่ใช่ตัวเลือก ฉันต้องการimgแท็กเพื่อจุดประสงค์ด้าน SEO คำตอบของคุณนั้นเรียบง่ายสง่างามและแก้ไขอุปสรรคทั้งหมดของฉัน! ไชโย! ผู้ใช้ไม่จำเป็นต้องดาวน์โหลดทั้งรูปภาพ นอกจากนี้ฉันสามารถเพิ่มรูปภาพจำนวนเท่าใดก็ได้

— ซาเวียร์

ทุกคำตอบที่ฉันอ่านจนถึงตอนนี้จะบังคับให้ฉันประกาศแหล่งที่มาของฉันในสไตล์ชีทของฉันหรือใช้ CSS แบบอินไลน์ในมาร์กอัปของฉัน ซึ่งฉันก็ไม่พอใจ รหัสยุ่ง!

— ซาเวียร์

7

ไม่คุณไม่สามารถตั้งค่าแอตทริบิวต์ src ของภาพผ่าน CSS ได้ ที่ใกล้ที่สุดที่คุณจะได้รับคืออย่างที่คุณพูดbackgroundหรือbackground-imageหรือฉันจะไม่แนะนำให้ทำเช่นนั้นเพราะมันค่อนข้างไร้เหตุผล

อย่างไรก็ตามมีวิธีแก้ปัญหา CSS3 สำหรับคุณหากเบราว์เซอร์ที่คุณกำหนดเป้าหมายสามารถใช้งานได้ ใช้ตามที่อธิบายไว้ในคำตอบของcontent:url Pacerier คุณสามารถค้นหาโซลูชันข้ามเบราว์เซอร์อื่น ๆ ได้จากคำตอบอื่น ๆ ด้านล่าง

— cletus
แหล่งที่มา

1

ทำไมลงคะแนน? คำตอบนี้มีความแม่นยำมากกว่าคำตอบที่ยอมรับ

— harsimranb

1

คำตอบที่ดีที่สุด: ไม่คุณไม่สามารถทำได้ด้วย CSS

— Milche Patern

4

ใส่รูปภาพหลายรูปในคอนเทนเนอร์ "การควบคุม" และเปลี่ยนคลาสของคอนเทนเนอร์แทน ใน CSS เพิ่มกฎเพื่อจัดการการมองเห็นของภาพขึ้นอยู่กับคลาสของคอนเทนเนอร์ สิ่งนี้จะให้ผลเช่นเดียวกับการเปลี่ยนแปลงimg srcคุณสมบัติของภาพเดี่ยว

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 backround-imageแต่ไม่เหมือนการเปลี่ยนimg srcผ่าน JS

— บรองซ์
แหล่งที่มา

3

ทางเลือกอื่น

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

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

— Tukaz
แหล่งที่มา

3

ข้อมูลบางอย่างที่ฉันจะเก็บไว้ใน HTML แต่มันเป็นการดีกว่าที่จะกำหนดsrcใน CSS:

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

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

— Renat Gatin
แหล่งที่มา

2

เท่าที่ฉันทราบคุณไม่สามารถ CSS เป็นเรื่องเกี่ยวกับสไตล์และ src ของรูปภาพคือเนื้อหา

— NawaMan
แหล่งที่มา

3

ทุกวันนี้ภาพค่อนข้างบ่อยมีเพียงเพื่อจัดรูปแบบหน้า

— Lorenzo Polidori

2

ความหมายคืออาจมีความแตกต่างระหว่างภาพที่ใช้เป็นเส้นขอบพื้นหลัง ฯลฯ และที่เป็นส่วนหนึ่งของเนื้อหาของหน้าเช่น ไดอะแกรมภาพถ่ายบทความ ฯลฯ

— Rhys van der Waerden

1

คุณสามารถและมีกรณีทั่วไปที่ถูกต้องที่คุณต้องการ

— ryan0

2

เพื่อเน้นย้ำถึงวิธีแก้ไขปัญหาก่อนหน้านี้และเน้นย้ำถึงการใช้ CSS อย่างแท้จริงที่นี่คือคำตอบ

จำเป็นต้องใช้โซลูชัน CSS บริสุทธิ์ในกรณีที่คุณจัดหาเนื้อหาจากไซต์อื่นและทำให้คุณไม่สามารถควบคุม HTML ที่ส่งมอบได้ ในกรณีของฉันฉันกำลังพยายามลบการสร้างแบรนด์ของเนื้อหาต้นฉบับที่ได้รับอนุญาตเพื่อที่ใบอนุญาตไม่จำเป็นต้องโฆษณาให้กับ บริษัท ที่พวกเขากำลังซื้อเนื้อหาจาก ดังนั้นฉันจะลบโลโก้ของพวกเขาในขณะที่เก็บทุกอย่างไว้ ฉันควรทราบว่านี่เป็นสัญญาที่ลูกค้าทำ

{ /* 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
แหล่งที่มา

2

ฉันรู้ว่านี่เป็นคำถามที่เก่ามาก แต่ไม่มีคำตอบที่ให้เหตุผลที่เหมาะสมว่าทำไมถึงไม่สามารถทำได้ ในขณะที่คุณสามารถ "ทำ" สิ่งที่คุณกำลังมองหาคุณไม่สามารถทำได้ในทางที่ถูกต้อง เพื่อให้มีแท็ก img ที่ถูกต้องจะต้องมีมีแอตทริบิวต์ src และ alt

ดังนั้นคำตอบใด ๆ ที่ให้วิธีการทำเช่นนี้ด้วยแท็ก img ที่ไม่ได้ใช้คุณลักษณะ src กำลังส่งเสริมการใช้รหัสที่ไม่ถูกต้อง

กล่าวโดยย่อ: สิ่งที่คุณกำลังมองหาไม่สามารถทำได้อย่างถูกกฎหมายภายในโครงสร้างของไวยากรณ์

ที่มา: W3 Validator

— Geowil
แหล่งที่มา

2

หรือคุณสามารถทำสิ่งนี้ซึ่งฉันพบใน 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;
}

ดังนั้นการซ่อนภาพอย่างมีประสิทธิภาพและขยายพื้นหลัง โอ้ช่างเป็นแฮก แต่ถ้าคุณต้องการแท็ก IMG ที่มีข้อความ alt และพื้นหลังที่สามารถปรับขนาดได้โดยไม่ต้องใช้ JavaScript?

ในโครงการที่ฉันทำงานอยู่ตอนนี้ฉันสร้างเทมเพลตทวิกบล็อกฮีโร่

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

— Pocketninja
แหล่งที่มา

1

หากคุณไม่ต้องการตั้งค่าคุณสมบัติพื้นหลังคุณไม่สามารถตั้งค่าแอตทริบิวต์ src ของรูปภาพโดยใช้ CSS เท่านั้น

หรือคุณสามารถใช้ JavaScript เพื่อทำสิ่งนั้น

— Guillaume Flandre
แหล่งที่มา

1

การใช้ CSS ไม่สามารถทำได้ แต่ถ้าคุณใช้ JQuery สิ่งนี้จะเป็นการหลอกลวง:

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

— วีระ
แหล่งที่มา

จริง ๆ แล้วมันสามารถ)) ดูคำตอบสำหรับคำถามเดียวกันนี้ได้ที่นี่: stackoverflow.com/questions/2182716/…

— mikhail-t

1

คุณสามารถแปลงมันด้วย JS:

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

— ราอูลมาร์ติน
แหล่งที่มา

0

หากคุณพยายามที่จะเพิ่มภาพในปุ่มแบบไดนามิกตามบริบทของโครงการของคุณคุณสามารถใช้? นำไปอ้างอิงแหล่งอ้างอิงจากผลลัพธ์ ที่นี่ฉันใช้การออกแบบ mvvm เพื่อให้ค่า Model.Phases ของฉันเป็นตัวกำหนดว่าฉันต้องการให้ปุ่มของฉันถูกเติมด้วยรูปภาพของหลอดไฟเปิดหรือปิดตามค่าของเฟสแสง

ไม่แน่ใจว่าสิ่งนี้ช่วยได้หรือไม่ ฉันใช้ JqueryUI, พิมพ์เขียวและ CSS คำจำกัดความของคลาสควรอนุญาตให้คุณจัดสไตล์ปุ่มตามสิ่งที่คุณต้องการ

    <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
แหล่งที่มา

0

ฉันจะเพิ่มสิ่งนี้: ภาพพื้นหลังสามารถจัดตำแหน่งได้ด้วยbackground-position: x y;(แนวตั้ง x แนวนอน y) (.. ) กรณีของฉัน CSS:

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

— จอห์น
แหล่งที่มา

0

รหัส 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>

รหัส 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!!!' */);
}

ฉันเรียน html หลังเลิกเรียนสองสามวันและต้องการทราบวิธีการทำเช่นนี้ ค้นพบพื้นหลังแล้วใส่ 2 และ 2 เข้าด้วยกัน ใช้งานได้ 100% ฉันตรวจสอบแล้วถ้าไม่แน่ใจว่าคุณกรอกข้อมูลที่จำเป็น !!! เราต้องระบุความสูงเพราะถ้าไม่มีมันก็จะไม่มีอะไร !!! ฉันจะปล่อยให้เชลล์พื้นฐานนี้คุณสามารถแอดออน

ตัวอย่าง:

 <!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 ใช่ฉันเป็นผู้ใช้ Linux;)

— Z_Doctor
แหล่งที่มา

0

วิธีการใด ๆ ที่ใช้backgroundหรือbackground-imageมีแนวโน้มว่าจะล้มเหลวเมื่อผู้ใช้พิมพ์เอกสารด้วย"พิมพ์สีและภาพพื้นหลัง "คนพิการ ซึ่งเป็นค่าเริ่มต้นของเบราว์เซอร์ทั่วไปที่น่าเสียดาย

วิธีเดียวที่เป็นมิตรกับการพิมพ์และข้ามเบราว์เซอร์ที่นี่คือวิธีที่เสนอโดย Bronx

— Simon Rozman
แหล่งที่มา

0

กำลังโหลด IMG src จากคำนิยาม CSS โดยใช้คุณสมบัติ 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)>

ขยายตัวอย่างข้อมูล

srcนิยามว่างบน <IMG> จะเรียกใช้งานฟังก์ชั่น onerror: loadIMG
ฟังก์ชัน loadIMG คำนวณค่า CSS
ดึงแถบอักขระที่ผิดกฎหมายทั้งหมด
ตั้งค่า IMG.src
เมื่อ CSS เปลี่ยนรูปจะไม่ถูกอัพเดต! คุณต้องเรียก loadIMG อีกครั้ง

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

คำตอบ SO ที่เกี่ยวข้อง: WCPROPS

— Engelman '365CSI' ของ Danny
แหล่งที่มา

-3

แค่ใช้ HTML5 :)

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

— แม็กซ์
แหล่งที่มา

OP กำลังมองหาการล้างมาร์กอัพ HTML ด้วยโซลูชัน CSS โดยเฉพาะ คำตอบนี้จะถ่วงมาร์กอัปต่อไปเท่านั้น

— webaholik

เป็นไปได้ไหมที่จะตั้งค่าคุณสมบัติเทียบเท่า src ของแท็ก img ใน CSS?

ชุดของวิธีการที่เป็นไปได้ในการตั้งค่ารูปภาพจาก CSS

สรุปผลการวิจัย

<li>องค์ประกอบ [HTML4.01 +]

<figure>องค์ประกอบ [HTML5 +]

<object>องค์ประกอบ [HTML4 +]

<SVG>แท็ก

<canvas>องค์ประกอบ [HTML5 +]

<input>องค์ประกอบด้วยtype="image"

กำลังโหลด IMG src จากคำนิยาม CSS โดยใช้คุณสมบัติ CSS ที่ทันสมัย

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

`<li>`องค์ประกอบ [HTML4.01 +]

`<figure>`องค์ประกอบ [HTML5 +]

`<object>`องค์ประกอบ [HTML4 +]

`<SVG>`แท็ก

`<canvas>`องค์ประกอบ [HTML5 +]

`<input>`องค์ประกอบด้วย`type="image"`