क्या सीएसएस में एक img टैग के src विशेषता के बराबर सेट करना संभव है?

531

क्या srcसीएसएस में विशेषता मान सेट करना संभव है ? वर्तमान में, मैं क्या कर रहा हूँ:

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

और मैं चाहता हूं कि यह कुछ ऐसा हो

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

मैं सीएसएस में या गुणों का उपयोग किए बिना ऐसा करना चाहता हूं ।backgroundbackground-image:

html  css  image 
— राकेश जुयाल
स्रोत
1
: यह जाहिरा तौर पर CSS3 में संभव होने जा रहा है w3.org/TR/css3-values/#attribute
— graphicdivine
7
यह अब संभव है। Chrome / Safari / Opera पर परीक्षण किया गया: stackoverflow.com/a/11484688/632951
— Pacerier
2
लेकिन फ़ायरफ़ॉक्स 30.0, इंटरनेट एक्सप्लोरर 11.0 का समर्थन नहीं करता है
— लक्ष्मीकांत डांगे
इस सीएसएस केवल समाधान ने मेरे लिए काम किया (सभी ब्राउज़रों में): stackoverflow.com/a/19114098/448816 , अपवाद के साथ मुझे जोड़ना था: 'पृष्ठभूमि-आकार: 100%;'।
— मिखाइल-टी
(2020) आप इसे जेएस के साथ कर सकते हैं getPropertyValue("--src")देखें: jsfiddle.net/CustomElementsExamples/vjfpu3a2
— डैनी '365CSI' एंगेलमैन

जवाबों:

880

का उपयोग करें content:url("image.jpg")।

पूर्ण कार्य समाधान ( Live Demo):

<!doctype html>

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

<img class="MyClass123"/>
स्निपेट का विस्तार करें

परीक्षण किया गया और काम कर रहा है:

  • क्रोम 14.0.835.163
  • सफारी 4.0.5
  • ओपेरा 10.6

परीक्षण किया और काम नहीं कर रहा है:

  • फ़ायर्फ़ॉक्स 40.0.2 (डेवलपर नेटवर्क टूल का अवलोकन करते हुए, आप देख सकते हैं कि URL लोड होता है, लेकिन छवि प्रदर्शित नहीं होती है)
  • इंटरनेट एक्सप्लोरर 11.0.9600.17905 (URL कभी लोड नहीं होता)
— Pacerier
स्रोत
7
@gotqn, अब तक केवल क्रोम सफारी ओपेरा।
— पचेरियर
36
@ EricG, विभिन्न अनुप्रयोगों की अलग-अलग आवश्यकताएं हैं। यदि यह आपकी आवश्यकताओं के अनुरूप नहीं है, तो इसका उपयोग न करें। यदि ऐसा होता है, तो इसका उपयोग करें।
— पचेरियर
4
IE10 काम नहीं कर रहा है एक नहीं जाना है। हम IE7 खाई (IE6 के बारे में बात नहीं करते हैं)। IE8 भी, अगर जरूरत है। लेकिन IE9 - IE10 ... नहीं।
— रॉल्फ
11
जोड़ने के लिए भी, जो ब्राउज़र को असाइन contentकरने का समर्थन करता है img, वह अपने व्यवहार को बदल देता है। छवि आकार विशेषताओं को अनदेखा करना शुरू कर देती है, और क्रोम / सफारी में यह 'इमेज सेव' जैसे संदर्भ मेनू विकल्प खो देता है। ऐसा इसलिए है क्योंकि खाली प्रतिस्थापित तत्व से contentप्रभावी रूप imgसे कुछ के रूप में परिवर्तित होता है । <span><img></span>
— इल्या स्ट्रेल्ट्सिन
3
उचित ब्राउज़र समर्थन के बिना मैं इसे एक वैध उत्तर के रूप में नहीं देखता, क्षमा करें।
— एमुछीन
183

एक समाधान है जो मुझे आज मिला (IE6 +, FF, ओपेरा, क्रोम में काम करता है):

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

यह काम किस प्रकार करता है:

  • छवि तब तक सिकुड़ी हुई है जब तक कि चौड़ाई और ऊंचाई से दिखाई न दे।
  • फिर, आपको गद्दी के साथ छवि आकार को 'रीसेट' करना होगा। यह एक 16x16 छवि देता है। बेशक आप आयताकार चित्र बनाने के लिए पैडिंग-लेफ्ट / पैडिंग-टॉप का उपयोग कर सकते हैं।
  • अंत में, पृष्ठभूमि का उपयोग करके नई छवि को वहां रखा गया है।
  • यदि नई पृष्ठभूमि छवि बहुत बड़ी या बहुत छोटी है, तो मैं background-sizeउदाहरण के लिए उपयोग करने की सलाह देता हूं : background-size:cover;जो आपकी छवि को आवंटित स्थान में फिट करता है।

यह सबमिट-इनपुट-छवियों के लिए भी काम करता है, वे क्लिक करने योग्य रहते हैं।

लाइव डेमो देखें: http://www.audenaerde.org/csstricks.html#imagereplacecss

का आनंद लें!

— RobAu
स्रोत
6
@RobAnu: यह काफी अच्छी तरह से काम करता है - jsfiddle
— TimPietrusky
9
आपको यह सौंपने के लिए कि यह आकर्षक और चालाक है, लेकिन एक खाली DIV अधिक सीधे आगे है।
— वोलोमाइक
11
इस मामले में यह है। हालाँकि ऐसे मामले हैं, जहाँ आप HTML को नियंत्रित नहीं कर सकते हैं और फिर भी IMG में हेरफेर करना चाहते हैं। वहाँ यह समाधान भी काम करेगा
— RobAu
2
यदि छवि में एक srcविशेषता है, तो यह वह तकनीक है जिसकी आपको आवश्यकता है। +1 - मुझे बहुत मदद मिली
— जेम्स लॉन्ग
3
इस उत्तर पर रैंकिंग नहीं, जो कुछ अनुप्रयोगों के लिए समाधान हो सकता है, लेकिन इस पद्धति में एक सीमा है। छवि फ़ाइल के प्रतिपादन के आयामों पर आपका कोई नियंत्रण नहीं है। सामान्य उपयोग में, आप एक छवि की ऊंचाई-चौड़ाई को नियंत्रित कर सकते हैं, अगर फ़ाइल स्रोत में निर्दिष्ट है। लेकिन यह मूल रूप से एक पृष्ठभूमि छवि के साथ एक div से अलग नहीं है, जहां अगर आपका div छवि से बड़ा है, तो आप भाग्य से बाहर हैं।
— ताराकुस
113

सीएसएस से छवियों को सेट करने के लिए संभावित तरीकों का एक संग्रह

सीएसएस 2 के :afterछद्म तत्व या नए वाक्य रचना ::afterसे CSS3 के साथ content:संपत्ति:

पहली W3C अनुशंसा: कैस्केडिंग शैली पत्रक, स्तर 2 CSS2 विशिष्टता 12 मई 1998
नवीनतम W3C अनुशंसा: चयनकर्ता स्तर 3 W3C अनुशंसा 29 सितंबर 2011

यह विधि किसी तत्व के दस्तावेज़ ट्री सामग्री के ठीक बाद सामग्री को जोड़ देती है।

नोट: कुछ ब्राउज़र प्रयोगात्मकcontent रूप से कुछ तत्व चयनकर्ताओं को सीधे नवीनतम डब्ल्यू 3 सी सिफारिश की अवहेलना करने वाली संपत्ति को प्रस्तुत करते हैं जो परिभाषित करता है:

पर लागू होता है: :beforeऔर :afterछद्म तत्व

CSS2 सिंटैक्स (आगे-संगत): 

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

CSS3 चयनकर्ता: 

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

डिफ़ॉल्ट प्रतिपादन: मूल आकार (स्पष्ट आकार घोषणा पर निर्भर नहीं करता है)

यह विनिर्देश पूरी तरह से बदले हुए तत्वों (जैसे HTML में IMG) के बाद: के पहले और बाद की बातचीत को परिभाषित नहीं करता है। भविष्य के विनिर्देश में इसे और अधिक विस्तार से परिभाषित किया जाएगा।

लेकिन इस लेखन के समय भी, एक <IMG>टैग के साथ व्यवहार को अभी भी परिभाषित नहीं किया गया है और यद्यपि इसका उपयोग हैक किए गए और गैर मानकों के अनुरूप तरीके से किया जा सकता है , के साथ उपयोग <img>की अनुशंसा नहीं की जाती है !

महान उम्मीदवार विधि, देखें निष्कर्ष ...

CSS1 की background-image:संपत्ति:

पहली डब्ल्यू 3 सी सिफारिश: कैस्केडिंग स्टाइल शीट्स, स्तर 1 17 दिसंबर 1996

यह गुण किसी तत्व की पृष्ठभूमि छवि सेट करता है। बैकग्राउंड इमेज सेट करते समय, एक बैकग्राउंड कलर भी सेट करना चाहिए, जिसका इस्तेमाल इमेज के अनुपलब्ध होने पर किया जाएगा। जब छवि उपलब्ध होती है, तो यह पृष्ठभूमि के रंग के ऊपर मढ़ा जाता है।

यह संपत्ति सीएसएस की शुरुआत से आसपास रही है और फिर भी यह एक शानदार उल्लेख के लायक है।

डिफ़ॉल्ट प्रतिपादन: मूल आकार (केवल पोस्ट नहीं किया जा सकता है)

हालाँकि ,

CSS3 की background-size:संपत्ति ने कई स्केलिंग विकल्पों की अनुमति देकर इस पर सुधार किया:

नवीनतम W3C स्थिति: उम्मीदवार सिफारिश सीएसएस पृष्ठभूमि और सीमाएं मॉड्यूल स्तर 3 9 सितंबर 2014

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

लेकिन इस संपत्ति के साथ भी, यह कंटेनर के आकार पर निर्भर करता है।

अभी भी एक अच्छा उम्मीदवार विधि, निष्कर्ष देखें ...

CSS2 की list-style:संपत्ति के साथ display: list-item:

पहली W3C सिफारिश: कैस्केडिंग स्टाइल शीट्स, स्तर 2 CSS2 विनिर्देश 12 मई 1998

list-style-image: संपत्ति उस छवि को सेट करती है जिसका उपयोग सूची आइटम मार्कर (बुलेट) के रूप में किया जाएगा

सूची गुण सूची के मूल दृश्य प्रारूपण का वर्णन करते हैं: वे स्टाइल शीट को मार्कर प्रकार ( छवि , ग्लिफ़, या संख्या) निर्दिष्ट करने की अनुमति देते हैं

display: list-item- यह मान <li>मूल ब्लॉक बॉक्स और मार्कर बॉक्स उत्पन्न करने के लिए एक तत्व (जैसे, HTML में) का कारण बनता है ।

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

आशुलिपि सीएसएस: ( <list-style-type> <list-style-position> <list-style-image>) 

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

डिफ़ॉल्ट प्रतिपादन: मूल आकार (स्पष्ट आकार घोषणा पर निर्भर नहीं करता है)

प्रतिबंध:

  • विरासत में OL और UL तत्वों से LI तत्वों के लिए 'सूची-शैली' मान स्थानांतरित किया जाएगा। यह सूची शैली की जानकारी निर्दिष्ट करने का अनुशंसित तरीका है।

  • वे सूची मार्कर के लिए लेखकों को अलग शैली (रंग, फ़ॉन्ट, संरेखण , आदि) निर्दिष्ट करने की अनुमति नहीं देते हैं या इसकी स्थिति को समायोजित नहीं करते हैं

यह विधि <img>टैग के लिए भी उपयुक्त नहीं है क्योंकि तत्व प्रकारों के बीच रूपांतरण नहीं किया जा सकता है, और यहां क्रोम पर काम नहीं करने वाली सीमित, गैर अनुपालन हैक है।

अच्छा उम्मीदवार तरीका, देखें निष्कर्ष ...

CSS3 की border-image:संपत्ति की सिफारिश :

नवीनतम W3C स्थिति: उम्मीदवार सिफारिश सीएसएस पृष्ठभूमि और सीमाएं मॉड्यूल स्तर 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>src

कोड स्निपेट दिखाएं

मानकों के प्रचार के बाद अच्छी उम्मीदवार पद्धति पर विचार किया जाना चाहिए।

CSS3 की element()अंकन कार्य ड्राफ्ट एक उल्लेख के लायक है:

नोट: 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के आधार पर आईडी चयनकर्ता सीएसएस के माध्यम से:

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

.hide {display: none}

नोट: यह प्रायोगिक है और केवल -mozफ़ायरफ़ॉक्स में उपसर्ग के साथ काम करता है और केवल ओवर backgroundया background-imageप्रॉपर्टीज में भी निर्दिष्ट आकारों की आवश्यकता होती है।

निष्कर्ष

  1. कोई भी शब्दार्थ सामग्री या संरचनात्मक जानकारी HTML में जाती है।
  2. स्टाइलिंग और प्रस्तुति संबंधी जानकारी सीएसएस में जाती है।
  3. एसईओ प्रयोजनों के लिए, सीएसएस में सार्थक चित्र छिपाएँ नहीं ।
  4. प्रिंट करते समय पृष्ठभूमि ग्राफिक्स आमतौर पर अक्षम होते हैं।
  5. कस्टम टैग सीएसएस से उपयोग और स्टाइल किए जा सकते हैं, लेकिन इंटरनेट एक्सप्लोरर के आदिम संस्करण समझ में नहीं आते हैं] ( जावास्क्रिप्ट के बिना या सीएसएस मार्गदर्शन के बिना एचटीएमएल 5 टैग (शिव के साथ) स्टाइल नहीं करते हैं ।
  6. एसपीए (सिंगल पेज एप्लिकेशन), डिजाइन द्वारा, आमतौर पर पृष्ठभूमि में छवियां शामिल होती हैं

कहा जा रहा है कि, चलो HTML टैग्स को छवि प्रदर्शन के लिए फिट करते हैं:

<li>तत्व [HTML4.01 +]

विधि के list-style-imageसाथ पूर्ण usecase display: list-item।

<li>तत्व, खाली हो सकता है, की अनुमति देता है प्रवाह सामग्री और यह और भी छोड़ करने की अनुमति दी है </li>अंत टैग।

कोड स्निपेट दिखाएं

सीमाएँ: शैली के लिए कठिन ( width:या float:मदद कर सकता है)

<figure>तत्व [एचटीएमएल 5 +]

आंकड़ा तत्व कुछ प्रवाह सामग्री का प्रतिनिधित्व करता है, वैकल्पिक रूप से एक कैप्शन के साथ, यह स्व-निहित है (एक पूर्ण वाक्य की तरह) और आमतौर पर दस्तावेज़ के मुख्य प्रवाह से एकल इकाई के रूप में संदर्भित किया जाता है।

तत्व बिना किसी सामग्री के मान्य है, लेकिन इसमें शामिल होने की सिफारिश की गई है <figcaption>।

इस प्रकार तत्व का उपयोग चित्र, चित्र, फोटो , कोड सूची इत्यादि को दर्शाने के लिए किया जा सकता है ।

डिफ़ॉल्ट रेंडरिंग: तत्व दाएं संरेखित है, बाएँ और दाएँ दोनों पैडिंग के साथ!

<object>तत्व [HTML4 +]

छवियों को शामिल करने के लिए, लेखक OBJECT तत्व या IMG तत्व का उपयोग कर सकते हैं।

dataविशेषता के लिए आवश्यक है और एक मान्य हो सकता है MIME प्रकार एक मूल्य के रूप में! 

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

नोट: <object>सीएसएस से टैग का उपयोग करने के लिए एक ट्रिक एक कस्टम वैध MimeType सेट करने के लिए होगा जिसके x-image/xबाद कोई डेटा नहीं होगा (आवश्यक अल्पविराम के बाद कोई डेटा नहीं है ,)

डिफ़ॉल्ट रेंडरिंग: 300 x 150px, लेकिन आकार HTML या CSS में निर्दिष्ट किया जा सकता है।

<SVG>टैग

एक एसवीजी सक्षम ब्राउज़र की आवश्यकता है और इसमें <image>रेखापुंज छवियों के लिए एक तत्व है

<canvas>तत्व [एचटीएमएल 5 +]।

widthकरने के लिए विशेषता चूक 300 , और heightकरने के लिए विशेषता चूक 150 ।

के <input>साथ तत्वtype="image"

सीमाएं:

... तत्व से यह उम्मीद की जाती है कि वह बटन को प्रदर्शित करता है जैसे कि तत्व एक बटन है।

जब कोई पाठ नहीं है, तो क्रोम 4x4px खाली वर्ग का अनुसरण करता है और उसका प्रतिपादन करता है

आंशिक समाधान, सेट value=" ": 

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

HTML5.1<picture> में आगामी तत्व के लिए भी देखें , वर्तमान में काम कर रहे मसौदे ।

— CSᵠ
स्रोत
(2020) सीएसएस गुणों का उपयोग करें: stackoverflow.com/questions/2182716/…
— डैनी '365CSI' एंगेलमैन
शानदार उत्तर लेकिन मूल आदिमता प्रदान करने के लिए एक मंच के रूप में वेब की पूर्ण विफलता को दर्शाता है।
— serraosays
26

मैंने इस CSS के साथ खाली div समाधान का उपयोग किया:

#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>
— इमैनुएल टौजरी
स्रोत
यदि मैं इसे इनलाइन प्रदर्शित करना चाहता हूं तो क्या होगा? "डिस्प्ले: इनलाइन" को जोड़ने पर मेरे
— डिक्स
1
@elsurudo उपयोग प्रदर्शित करें: यदि आप इनलाइन तत्व पर चौड़ाई और ऊँचाई सेट करना चाहते हैं तो इनलाइन-ब्लॉक
— Erin Drummond
1
शीर्ष उत्तर फ़ायरफ़ॉक्स के साथ काम नहीं करता है, इसलिए मुझे आपका उत्तर अधिक पसंद है! और यह स्पष्ट है और कोई सीएसएस हैक नहीं है।
— सर्गेई बोगदानोव
यदि आपको एक से अधिक छवि प्रदर्शित करने की आवश्यकता है, तो ध्यान रखें कि आईडी फ़ील्ड तकनीकी रूप से अद्वितीय है, इसलिए आईडी के बजाय CSS वर्ग चयनकर्ता का उपयोग करना आदर्श है।
— मिक्स
यदि आपके पास पृष्ठभूमि ग्राफिक्स प्रिंट सेटिंग्स में बंद हैं, तो इस प्रकार की छवियां ठीक से प्रिंट नहीं होंगी।
— posfan12
14

मुझे प्रस्तावित समाधानों की तुलना में बेहतर तरीका मिला, लेकिन यह वास्तव में पृष्ठभूमि-छवि का उपयोग करता है। आज्ञाकारी विधि (IE6 के लिए पुष्टि नहीं कर सकते) क्रेडिट: http://www.kryogenix.org/code/browser/lir/

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

सीएसएस:

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

पुरानी छवि नहीं देखी गई है और नई को उम्मीद के मुताबिक देखा गया है।


निम्न साफ ​​समाधान केवल वेबकिट के लिए काम करता है

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समर्थन करना है , तो मुझे लगता है कि समर्थन गैर-मौजूद है। फिर भी, बहुत लुभावना।
— १२:१५
आप सही कह रहे हैं, मुझे अभी एक अधिक आज्ञाकारी तरीका मिला है। मेरी पोस्ट अपडेट हो रही है! अब मुझे वोट दो;) हाहा।
— एरिका
अद्यतन दृष्टिकोण निश्चित रूप से सामग्री पर भरोसा करने वाले से बेहतर है। मूल लिंक को शामिल करने के लिए धन्यवाद। वह आनंदमय था। आप ध्यान देंगे कि @ RobAu का उत्तर वास्तव में आपके अपडेट किए गए संस्करण के समान है।
— जट्रीम
1
@jatrim contentसंपत्ति सभी तत्वों पर लागू होती है। http://www.w3.org/TR/css3-content/#content
— XP1
13

वो सही हैं। IMG एक सामग्री तत्व है और CSS डिजाइन के बारे में है। लेकिन, कैसे जब आप कुछ सामग्री तत्वों या गुणों का उपयोग डिजाइन उद्देश्यों के लिए करते हैं? मेरे पास मेरे वेब पृष्ठों पर IMG है जो यदि शैली (CSS) को बदलते हैं तो मुझे बदलना होगा।

खैर यह सीएसएस शैली में IMG प्रस्तुति (वास्तव में छवि नहीं) को परिभाषित करने के लिए एक समाधान है।

  1. 1x1 पारदर्शी gif या png बनाएँ।
  2. उस छवि को IMG का उचित "src" असाइन करें।
  3. सीएसएस शैली में "पृष्ठभूमि-छवि" के साथ अंतिम प्रस्तुति को परिभाषित करें।

यह एक सम्मोहन की तरह काम करता है :)

— फ्रैंक
स्रोत
5
-1 हालांकि आपका उत्तर बुरा नहीं है, वह विशेष रूप से उल्लेख करता है कि वह उपयोग नहीं करना चाहता हैbackground*
— fresskoma
1
यह एक ट्रिक है ... मेरी राय में ट्रिक्स को ब्राउज़र द्वारा बदल दिया जाएगा ... और एक दिन सुबह आप अपनी वेबसाइट में एक नरक देखेंगे: डी :)))
— महदी जाजिनी
11

यहाँ एक बहुत अच्छा समाधान है -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro (s) और Con (s):
(+) वेक्टर के साथ काम करता है ऐसी छवि जिसमें सापेक्ष चौड़ाई / ऊँचाई हो (एक ऐसी चीज़ जो रोबू का उत्तर नहीं संभालती है)
(+) क्रॉस ब्राउज़र है (IE8 + के लिए भी कार्य करता है)
(+) यह केवल CSS का उपयोग करता है। तो img src को संशोधित करने की कोई आवश्यकता नहीं है (या यदि आपके पास पहुंच नहीं है / पहले से मौजूद img sname को बदलना नहीं चाहते हैं)।
(-) क्षमा करें, यह पृष्ठभूमि सीएसएस विशेषता का उपयोग करता है :)

— OviC
स्रोत
अब, यह उचित समाधान है, मेरे लिए सभी ब्राउज़रों में काम करता है, धन्यवाद !! इसके अलावा उल्लेख के लायक मुझे जोड़ना था: पृष्ठभूमि-आकार: 100%; प्रतिस्थापन छवि शो को ठीक से बनाने के लिए ऊपर समाधान में सीएसएस वर्ग।
— मिखाइल-टी
9

आप अपने HTML कोड में 2 छवियों को परिभाषित कर सकते हैं और display: none;यह तय करने के लिए उपयोग कर सकते हैं कि कौन सा दिखाई देगा।

— कोस्टा एंडरियनोपोलोस
स्रोत
मैं एक ऐसे समाधान के लिए दूर-दूर तक खोज कर रहा था जो कि वेब रिस्पॉन्सिव था लेकिन साथ ही SEO को भी बनाए रखता था। मैं सीएसएस में मीडिया के प्रश्नों का उपयोग करना चाहता था ताकि उपयोग की गई डिवाइस के आधार पर अपनी छवि को बदल सकूं, लेकिन मैं अपनी सामग्री को HTML में रखना चाहता था। सीएसएस में सूत्रों की घोषणा एक ऐसा मार्ग था जिसे मैं नहीं लेना चाहता background-imageथा , इसलिए यह एक विकल्प नहीं था। मैं imgएसईओ प्रयोजनों के लिए टैग चाहता था । आपका उत्तर इतना सरल, सुरुचिपूर्ण है, और मेरी सभी बाधाओं को हल करता है! वाहवाही! साथ ही उपयोगकर्ता को दोनों चित्र डाउनलोड करने की आवश्यकता नहीं है। इसके अलावा, मैं किसी भी संख्या में चित्र जोड़ सकता हूं।
— जेवियर
अब तक पढ़े गए हर उत्तर ने मुझे अपने स्टाइलशीट में अपने स्रोतों को घोषित करने के लिए मजबूर किया, या मेरे मार्कअप में इनलाइन सीएसएस का उपयोग करने के लिए मजबूर किया। न तो जिससे मैं प्रसन्न था। गन्दा कोड!
— जेवियर
7

नहीं, आप CSS के माध्यम से छवि src विशेषता सेट नहीं कर सकते। निकटतम आप प्राप्त कर सकते हैं, जैसा कि आप कहते हैं, backgroundया background-image। मैं वैसे भी ऐसा करने की सिफारिश नहीं करूंगा क्योंकि यह कुछ हद तक अतार्किक होगा।

हालाँकि, आपके लिए CSS3 समाधान उपलब्ध है, यदि आपके द्वारा लक्षित ब्राउज़र इसका उपयोग करने में सक्षम हैं। content:url Pacerier के उत्तर में वर्णित के रूप में उपयोग करें । आप नीचे दिए गए अन्य उत्तरों में अन्य, क्रॉस-ब्राउज़र समाधान पा सकते हैं।

— cletus
स्रोत
1
नीचे वोट क्यों? यह उत्तर स्वीकृत उत्तर की तुलना में अधिक सटीक है।
— हरसिमरनब
1
अब तक का सबसे अच्छा जवाब: नहीं, आप इसे सीएसएस के साथ नहीं कर सकते।
— मिल्के पैटर
4

कई छवियों को "नियंत्रित" कंटेनर में रखें, और इसके बजाय कंटेनर की कक्षा को बदलें। सीएसएस में, कंटेनर की कक्षा के आधार पर छवियों की दृश्यता का प्रबंधन करने के लिए नियम जोड़ें। यह 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>

सीएसएस:

#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

ध्यान दें कि यह सीएसएस की तरह सभी छवियों को प्रीलोड करेगा backround-image, लेकिन img srcजेएस के माध्यम से बदलने के विपरीत ।

— ब्रोंक्स
स्रोत
3

वैकल्पिक तरीका है

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

कुछ डेटा मैं HTML में छोड़ दूंगा, लेकिन CSS में src को परिभाषित करना बेहतर है :

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

.logo {
    content:url('../images/logo.png');
}
— रेनाट जतिन
स्रोत
2

जहाँ तक मुझे जानकारी है, आप नहीं कर सकते। CSS स्टाइल के बारे में है और छवि का src कंटेंट है।

— NawaMan
स्रोत
3
आजकल, पेज को स्टाइल करने के लिए काफी बार छवियां होती हैं।
— लोरेंजो पोलिडोरी
2
निहितार्थ यह है कि सीमाओं, पृष्ठभूमि आदि के रूप में उपयोग की जाने वाली छवियों और उन के बीच अंतर हो सकता है जो वास्तव में पृष्ठ सामग्री का हिस्सा हैं। आरेख, लेख तस्वीरें आदि
— Rhys van der Waerden
1
आप कर सकते हैं, और आम, मान्य मामले हैं जहाँ आप करना चाहते हैं।
— ryan0
2

एक पूर्व समाधान को दोहराना और शुद्ध सीएसएस कार्यान्वयन पर ज़ोर देना यहाँ मेरा जवाब है।

उन मामलों में जहां आप किसी अन्य साइट से सामग्री सोर्स कर रहे हैं, शुद्ध शुद्ध समाधान की आवश्यकता है, और इस प्रकार आपके पास वितरित किए गए 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);
}
— डैनियल बर्न
स्रोत
2

मुझे पता है कि यह वास्तव में एक पुराना सवाल है, लेकिन कोई भी उत्तर इस बात के लिए उचित तर्क नहीं देता है कि ऐसा क्यों नहीं किया जा सकता है। जब आप "आप" कर सकते हैं तो आप जो खोज रहे हैं वह वैध तरीके से नहीं कर सकते हैं। वैध img टैग होने के लिए यह आवश्यक है src और alt विशेषताएँ ।

तो किसी भी तरह से जवाब देने के लिए एक रास्ता है कि एक img टैग का उपयोग नहीं करता है जो src विशेषता का उपयोग नहीं करता है अमान्य कोड के उपयोग को बढ़ावा दे रहा है।

संक्षेप में: आप जो खोज रहे हैं वह वाक्य रचना की संरचना के भीतर कानूनी रूप से नहीं किया जा सकता है।

स्रोत: W3 Validator

— Geowil
स्रोत
2

या आप ऐसा कर सकते हैं जो मुझे इंटरवेब चीज़ पर मिला।

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 टैग चाहते हैं जिसमें ऑल्ट टेक्स्ट और एक बैकग्राउंड है जो बिना जावास्क्रिप्ट का उपयोग किए स्केल कर सकता है?

मैं जिस प्रोजेक्ट पर काम कर रहा हूं, उसमें मैंने एक हीरो ब्लॉक ट्विग टेम्पलेट बनाया है

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

यदि आप एक पृष्ठभूमि संपत्ति सेट नहीं करना चाहते हैं, तो आप केवल CSS का उपयोग करके किसी छवि के src विशेषता को सेट नहीं कर सकते।

वैकल्पिक रूप से आप ऐसा काम करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

— गिलौम फ़्लैंड्रे
स्रोत
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

यदि आप अपने प्रोजेक्ट के संदर्भ के आधार पर गतिशील रूप से एक बटन में एक छवि जोड़ने की कोशिश कर रहे हैं, तो आप इसका उपयोग कर सकते हैं? एक परिणाम के आधार पर स्रोत का संदर्भ लें। यहाँ मैं अपने Model.Phases [0] मान को निर्धारित करने के लिए mvvm डिज़ाइन का उपयोग कर रहा हूं कि क्या मैं चाहता हूं कि मेरे बटन को लाइट चरण के मूल्य के आधार पर लाइटबल्ब की छवियों के साथ आबाद किया जाए।

यकीन नहीं होता अगर यह मदद करता है। मैं 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 ऊर्ध्वाधर) के साथ भी पोस्ट किया जा सकता है । (..) मेरा मामला, सीएसएस:

(..) 
#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 हाँ, मैं एक लिनक्स उपयोगकर्ता हूं;)

— Z_Doctor
स्रोत
0

उपयोगकर्ता द्वारा "प्रिंट पृष्ठभूमि के रंग और चित्र " के साथ दस्तावेज़ को अक्षम करने पर किसी भी विधि पर आधारित backgroundया background-imageविफल होने की संभावना है । जो दुर्भाग्य से विशिष्ट ब्राउज़र का डिफ़ॉल्ट है।

यहां एकमात्र प्रिंट-फ्रेंडली और क्रॉस-ब्राउज़र संगत विधि ब्रोंक्स द्वारा प्रस्तावित है।

— साइमन रोज़मैन
स्रोत
0

आधुनिक सीएसएस गुणों का उपयोग करके सीएसएस परिभाषा से IMG src लोड हो रहा है

<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> पर रिक्त परिभाषा ऑनरोर हैंडलर को ट्रिगर करती है: लोडआईएमजी फ़ंक्शन
  • लोडआईएमजी फ़ंक्शन सीएसएस मूल्य की गणना करता है
  • सभी गैरकानूनी चरित्रों को छीन लेता है
  • IMG.src सेट करता है
  • जब सीएसएस बदल जाता है, तो छवि अपडेट नहीं होती है! आपको फिर से loadIMG पर कॉल करना होगा

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

संबंधित SO उत्तर: WCPROPS

— डैनी '365CSI' एंगेलमैन
स्रोत
-3

बस HTML5 का उपयोग करें :) 

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
— मैक्स
स्रोत
ओपी विशेष रूप से सीएसएस समाधान के साथ अपने HTML मार्कअप को साफ करना चाहता है। यह जवाब केवल मार्कअप को अव्यवस्थित करेगा।
— वेबहॉलिक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.