IMG बनाम CSS बैकग्राउंड-इमेज का उपयोग कब करें?

777

IMGCSS के विपरीत, छवि को प्रदर्शित करने के लिए HTML टैग का उपयोग करना किन परिस्थितियों में अधिक उचित है background-image, और इसके विपरीत?

फैक्टर में एक्सेसिबिलिटी, ब्राउजर सपोर्ट, डायनेमिक कंटेंट या किसी भी तरह की टेक्निकल लिमिट या यूटिलिटी सिद्धांत शामिल हो सकते हैं।

— सिस्टम PAUSE
स्रोत

क्या आपको जगह लेने के लिए छवि की आवश्यकता है या क्या आप इस पर लिखना चाहते हैं?

— जियोवा 4

9

अद्यतन के रूप में, चूंकि यह Google पर बहुत अधिक रैंक करता है, ब्राउज़र स्केलिंग और पृष्ठभूमि-छवि के लिए स्ट्रेचिंग अब संभव है, और बहुत व्यापक रूप से समर्थित है (IE8 और नीचे, निश्चित रूप से, अपवाद होने के नाते), मामलों में 4 और 7 लूट का प्रतिपादन। IE8 और नीचे के लिए इस तरह के प्रभाव को कम करने या अनदेखा करने की अनुमति दे सकता है। caniuse.com/#search=background-image

— Shauna

महान और उपयोगी पोस्ट, मैं तुलना के लिए एक सवाल जोड़ दूँगा, सीएसएस का लाभ भी हॉवर प्रभाव है? यह img टैग का उपयोग करके दोहराया जा सकता है?

— एरिकोस

मैं आम तौर पर सभी सामग्री छवियों के लिए शीर्षक विशेषता और शीर्षक विशेषता दोनों को जोड़ता हूं। क्या यह बेहतर नहीं है?

— हार्टलेसन

2

इसके अलावा img पर क्लिक करने योग्य क्षेत्रों और संकेत के साथ मानचित्र हो सकता है

— Vitim.us

796

IMG का उचित उपयोग

का प्रयोग करें IMGअगर आप लोगों के पास करने का इरादा अपना पृष्ठ प्रिंट और आप छवि डिफ़ॉल्ट रूप से शामिल होना चाहते हैं। - JayTee
उपयोग IMG( altपाठ के साथ ) जब छवि का एक महत्वपूर्ण अर्थ अर्थ होता है, जैसे कि चेतावनी आइकन । यह सुनिश्चित करता है कि स्क्रीन रीडर सहित सभी उपयोगकर्ता-एजेंटों में छवि का अर्थ संचार किया जा सकता है।

आईएमजी के व्यावहारिक उपयोग

IMGयदि छवि लोगो या लोगो या व्यक्ति (वास्तविक व्यक्ति, स्टॉक फोटो लोगों की नहीं) जैसी सामग्री का हिस्सा है, तो प्लस ऑल्ट एट्रिब्यूट का उपयोग करें । - sanchothefat
IMGयदि आप टेक्स्ट स्केल के अनुपात में किसी चित्र को रेंडर करने के लिए ब्राउज़र स्केलिंग पर भरोसा करते हैं, तो इसका उपयोग करें ।
IE6 में कई ओवरले छवियों केIMG लिए उपयोग करें ।
का प्रयोग करें IMGएक साथ z-indexक्रम में एक पृष्ठभूमि छवि को फैलाने के अपने पूरे खिड़की को भरने के लिए।
ध्यान दें, यह CSS3 की पृष्ठभूमि के आकार के साथ सच नहीं है; नीचे # 6 देखें।
के imgबजाय का background-imageउपयोग नाटकीय रूप से एक पृष्ठभूमि पर एनिमेशन के प्रदर्शन में सुधार कर सकते हैं।

CSS बैकग्राउंड-इमेज का उपयोग कब करना है

यदि छवि सामग्री का हिस्सा नहीं है , तो सीएसएस पृष्ठभूमि छवियों का उपयोग करें । - sanchothefat
पाठ की छवि-प्रतिस्थापन करते समय सीएसएस पृष्ठभूमि छवियों का उपयोग करें । पैराग्राफ / हेडर। - sanchothefat
background-imageयदि आप लोगों को अपना पृष्ठ प्रिंट करने का इरादा रखते हैं और आप चाहते हैं कि छवि डिफ़ॉल्ट रूप से शामिल न हो, तो इसका उपयोग करें । - JayTee
background-imageयदि आपको सीएसएस स्प्राइट के साथ डाउनलोड समय में सुधार करने की आवश्यकता है, तो इसका उपयोग करें ।
background-imageयदि आपको सीएसएस स्प्राइट्स के साथ दिखाई देने वाली छवि के केवल एक हिस्से की आवश्यकता है, तो इसका उपयोग करें ।
का प्रयोग करें background-imageसाथ background-size:coverआदेश एक पृष्ठभूमि छवि को फैलाने के लिए अपनी पूरी खिड़की भरने के लिए।

— सिस्टम PAUSE
स्रोत

3

मैं अभी भी iffy पाठ प्रतिस्थापन भाग के लिए पृष्ठभूमि छवियों पर हूँ। मैं लोगों को पृष्ठभूमि-छवियों का उपयोग करते हुए देखता हूं, फिर पाठ के लिए टेक्स्ट-इंडेंट: -9999px का उपयोग कर रहा हूं। हालाँकि मुझे पता है कि इस तरह के टेक्स्ट इंडेंट्स एसईओ के लिए बुरे होते थे और मुझे लगता है कि यह अभी भी कुछ सर्च इंजन के लिए होना चाहिए। लेकिन सबसे महत्वपूर्ण, यदि आप चित्र बंद करते हैं, लेकिन छवि को भंग करने पर सीएसएस छोड़ देते हैं लेकिन पाठ अभी भी स्क्रीन से दूर है। जहाँ तक मैं एक छवि पर संबंधित पाठ के बारे में चिंतित हूँ, अगर छवियाँ प्रदर्शित नहीं होती हैं तो img टैग बेहतर हैं।

— स्कॉट रीड

53

बैकबाउंड छवि का व्यावहारिक उपयोग : जब आप बालों को लंबे समय तक लंबवत समस्याओं (अलग-अलग लंबवत आकार की छवियों के बारे में) में ढीला नहीं करना चाहते हैं;)

— फ्रैंक नॉक

12

हां, वर्टिकल सेंटिंग प्रॉब्लम - Flexbox पर लाओ!

— डीन_विलसन

3

@BinaryFunt - <div class="my-css-page-styles" style="background-image:url(blah.png);"></div>इस तरह से आप इसे अपने CSS स्टाइलशीट में स्टाइल कर सकते हैं लेकिन अगर बैकग्राउंड इमेज स्टाइल से ज्यादा कंटेंट का सवाल है तो आप अभी भी इसे HTML चीजों से एडिट कर रहे हैं।

— जिम्बो जॉनी

2

IMG के व्यावहारिक उपयोग के बिंदु 5 में एक clickbait प्रतीत होता है - सौंदर्य प्रसाधन के बारे में एक जापानी ब्लॉग पोस्ट की ओर इशारा करते हुए। लिंक www.ajaxline.com/browsers-performance-in-d dependence-of-html-coding [इस पर क्लिक न करें]

— wick3d

292

यह मेरे लिए एक काला और सफेद फैसला है। यदि छवि सामग्री का हिस्सा है जैसे कि लोगो या आरेख या व्यक्ति (वास्तविक व्यक्ति, स्टॉक फोटो लोग नहीं) तो <img />टैग प्लस वीडियो विशेषता का उपयोग करें । बाकी सभी चीजों के लिए सीएसएस पृष्ठभूमि छवियां हैं।

सीएसएस पृष्ठभूमि छवियों का उपयोग करने का अन्य समय है, जैसे कि टेक्स्ट का इमेज-रिप्लेसमेंट। पैराग्राफ / हेडर।

— roborourke
स्रोत

बहुत बढ़िया मामला! कांग्रेस - पाठ की छवि-प्रतिस्थापन करते समय पृष्ठभूमि-छवि का उपयोग करें।

— सिस्टम PAUSE

2

यह एक उचित बिंदु है, लेकिन निश्चित रूप से पाठ की छवि-प्रतिस्थापन (जैसे शीर्षक के लिए) आपको स्क्रीन पाठकों के लिए इसे पढ़ने के लिए "alt" जोड़ना होगा? या यदि आप अभी भी हेडिंग प्राप्त करते हैं तो चित्र प्रदर्शित नहीं होते हैं? हां, एक शीर्षक और फिर स्टाइल बेहतर होगा, लेकिन निश्चित रूप से आप पाठ चाहते हैं?

— थियो स्कोलाडिस

4

@ TheoScholiadis छवि प्रतिस्थापन का उपयोग करने का अर्थ पाठ के बजाय एक छवि का उपयोग करना नहीं है, लेकिन पाठ को किसी तरह से सीएसएस का उपयोग करके छिपाना और सीएसएस का उपयोग करके छवि को पृष्ठभूमि के रूप में आपूर्ति करना है। दस्तावेज़ शब्दहीन रूप से अछूता रहता है।

— रबोरोर्क

57

व्यक्तिगत रूप से मुझे नफरत है जब मैं "पाठ" की नकल नहीं कर सकता क्योंकि यह वास्तव में एक छवि है। मुझे आलसी कहो, लेकिन हे ...

— शाज़ जूल 25'13

1

जब आपको एसईओ उद्देश्य के लिए छवि की आवश्यकता होती है, तो alt विशेषता के साथ img टैग का उपयोग करें। अन्यथा सीएसएस का उपयोग करके पृष्ठभूमि में छवि का उपयोग करें।

— सुपर मॉडल

107

मुझे आश्चर्य है कि किसी ने अभी तक इसका उल्लेख नहीं किया है: सीएसएस संक्रमण ।

आप मूल रूप से एक divपृष्ठभूमि की छवि को बदल सकते हैं:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

यह जावास्क्रिप्ट या jQuery एनीमेशन के किसी भी प्रकार एक फीका करने के लिए बचाता <img/>है src।

एमडीएन पर संक्रमण के बारे में अधिक जानकारी ।

— रॉबी जेडब्ल्यू
स्रोत

3

यह एक अच्छा कारण नहीं है। : आप 2 उपरिशायी छवियों के साथ एक div, और निम्न सीएसएस हो सकता था #some_div { transition: opacity 0.5s; }, #some_div:hover #top_img { opacity: 0; }

— warkentien2

5

यदि आप उस लिंक किए गए MDN लेख (या w3c स्पेक्स) को पढ़ते हैं, तो आप पाएंगे कि पृष्ठभूमि-छवि गुणों में से एक नहीं है जो कि एनिमेटेबल है, और ऐसा करने वाला कोई भी ब्राउज़र (क्रोम) वेब मानकों का पालन नहीं कर रहा है। उस ने कहा, मुझे लगता है कि यह होना चाहिए, और यह एक अच्छा आसान प्रभाव है इसलिए मुझे निराशा है कि यह मानक का हिस्सा नहीं है।

— रॉबर्ट मैककी

72

उपरोक्त उत्तर केवल डिज़ाइन पहलू पर विचार करता है। मैं इसे एसईओ पहलुओं में सूचीबद्ध कर रहा हूं।

कब इस्तेमाल करें <img />

जब आपकी छवि को खोज इंजन द्वारा अनुक्रमित करने की आवश्यकता होती है
अगर इसका कंटेंट डिजाइन करने के लिए नहीं है।
यदि आपकी छवि बहुत छोटी नहीं है (प्रतिष्ठित चित्र नहीं)।
छवियाँ जहाँ आप जोड़ सकते हैं altऔर titleविशेषता।
एक वेबपेज से छवियां जो आप प्रिंट मीडिया सीएसएस का उपयोग करके प्रिंट करना चाहते हैं

सीएसएस का उपयोग कब करें background-image

छवियाँ पूरी तरह से डिजाइन करने के लिए इस्तेमाल किया।
सामग्री के साथ कोई संबंध नहीं।
छोटी छवियाँ जो हम CSS3 के साथ खेल सकते हैं।
दोहराई जाने वाली छवियां (ब्लॉग लेखक आइकन में, प्रत्येक लेख आदि के लिए तिथि आइकन दोहराया जाएगा)।

जैसा कि मैं इन कारणों के आधार पर उनका उपयोग करूंगा। ये Search Engine Optimization of Images के अच्छे अभ्यास हैं।

— सुभाष
स्रोत

54

डिफ़ॉल्ट रूप से पृष्ठभूमि छवियों को प्रिंट करने के लिए ब्राउज़र हमेशा सेट नहीं होते हैं; यदि आप लोगों को अपना पृष्ठ प्रिंट करने का इरादा है :)

— JayTee
स्रोत

9

ऐसा लगता है: PRO - IMG का उपयोग करें यदि आप चाहते हैं कि छवि डिफ़ॉल्ट रूप से प्रिंट हो। कांग्रेस - यदि आप डिफ़ॉल्ट रूप से छवि को प्रिंट नहीं करना चाहते हैं तो पृष्ठभूमि-छवि का उपयोग करें। अच्छा है!

— सिस्टम PAUSE

7

मुझे लगता है कि यह विचार अलग-अलग प्रिंट-केवल सीएसएस शैलियों का है जो छवियों को छिपाते हैं या उन्हें कुछ और उपयुक्त में बदलते हैं।

— ब्लेज़मॉन्गर

52

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

उदाहरण के लिए, मान लें कि आपके पास निम्न HTML है:

<div id="headerImage"></div>

... और सीएसएस:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

कुछ दिनों बाद, आप छवि का स्थान बदल देते हैं। आपको बस CSS को अपडेट करना है:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

अन्यथा, आपको प्रत्येक HTML फ़ाइल में srcउपयुक्त <img>टैग की विशेषता को अपडेट करना होगा (यह मानकर कि आप इस प्रक्रिया को स्वचालित करने के लिए सर्वर-साइड स्क्रिप्टिंग भाषा या CMS का उपयोग नहीं कर रहे हैं )।

यदि आप उपयोगकर्ता को छवि को बचाने में सक्षम नहीं होना चाहते हैं, तो भी पृष्ठभूमि छवियां उपयोगी हैं (हालांकि मुझे ऐसा करने की कभी आवश्यकता नहीं है)।

— स्टीव हैरिसन
स्रोत

14

पृष्ठभूमि छवियों को निश्चित रूप से कुछ न्यूनतम दृश्य स्रोत के साथ बचाया जा सकता है, बस एक छवि पर राइट-क्लिक करने के रूप में आसानी से नहीं।

— माइकल हैकर

2

फ़ायरफ़ॉक्स। दाएँ क्लिक करें। "पृष्ठभूमि छवि देखें"। मुश्किल नहीं है।

— टीआरआईजी

1

@TRiG जब तक कि ऐसा करने से रोकने के लिए पारदर्शी ओवरले या पृष्ठ-विशिष्ट संदर्भ मेनू संशोधन नहीं है। मैंने देखा है कि पहले, और मेरी राय में यह काफी मूर्खतापूर्ण है क्योंकि आपको स्रोत में स्पेलुनकिंग करने की भी आवश्यकता नहीं है, अगर पृष्ठ पूरी तरह से लोड हो गया है तो कम से कम फ़ायरफ़ॉक्स में आप टूल> पेज इंफो / अल्ट + टी पर क्लिक कर सकते हैं, i / राइट-क्लिक करें और देखें पृष्ठ जानकारी का चयन करें, मीडिया अनुभाग में ब्राउज़ करें, और सूची से इच्छित सभी आइटम सहेजें। बेशक, इसे रोकने के तरीके भी हैं, जैसे कि फ़्लैश फ़ाइल में छवि को एम्बेड करना या अन्य अजीब ट्रिक्स, लेकिन यहां तक कि उन्हें बायपास या अकाउंट किया जा सकता है।

— JAB

मुझे लगता है कि पृष्ठभूमि की तकनीक छवि को बचाने के लिए किसी उपयोगकर्ता को अस्वीकार करने के लिए काफी अच्छी नहीं है ...

— ncubica

45

Sanchothefat के उत्तर के समान है , लेकिन एक अलग पहलू से। मैं हमेशा खुद से पूछता हूं: अगर मैं वेबसाइट से पूरी तरह से स्टाइलशीट को हटा दूंगा, तो क्या शेष तत्व केवल सामग्री से संबंधित हैं? यदि हां, तो मैंने अपना काम अच्छा किया।

— viam0Zah
स्रोत

42

कुछ उत्तर यहां के परिदृश्य को दर्शाते हैं। यह एक मृत सरल स्थिति है।

हर बार जब आप एक छवि रखना चाहते हैं तो इस प्रश्न का उत्तर दें:

क्या यह सामग्री का हिस्सा है या डिजाइन का हिस्सा है?

यदि आप इसका उत्तर नहीं दे सकते हैं, तो आप शायद नहीं जानते कि आप क्या कर रहे हैं या आप क्या करना चाहते हैं!

इसके अलावा, दो तकनीकों के बगल में विचार न करें, सिर्फ इसलिए कि आप "प्रिंटर फ्रेंडली" होना चाहते हैं या नहीं। सीएसएस के साथ एसईओ बिंदु से सामग्री को छिपाएं नहीं। यदि आप सीएसएस फाइलों में खुद को अपनी सामग्री का प्रबंधन करते हुए पाते हैं, तो आपने अपने आप को पैर में गोली मार ली। यह केवल एक तुच्छ निर्णय है कि सामग्री क्या है या नहीं। हर दूसरे पहलू को नजरअंदाज किया जाना चाहिए।

— दर्शाता है
स्रोत

मुझे यह उत्तर पसंद है। यह बहुत स्पष्ट है। प्रिंटर के अनुकूल या एसईओ जैसे शेष मुद्दों को प्रत्येक परिदृश्य में व्यक्तिगत रूप से माना जाना चाहिए।

— जुआन

28

मैं एक और दो तर्क जोड़ूंगा:

यदि आपको छवि का आकार बदलने की आवश्यकता है तो एक img टैग अच्छा है । जैसे यदि मूल चित्र 100 px द्वारा 100px है, और आप इसे 80px तक 80px चाहते हैं, तो आप CSS टैग और img टैग की ऊंचाई सेट कर सकते हैं। ~~मुझे पृष्ठभूमि-छवि का उपयोग करने का कोई अच्छा तरीका नहीं पता है।~~ संपादित करें: यह अब CSS3 विशेषता का उपयोग करके पृष्ठभूमि-छवि के साथ भी किया जा सकता है ।background-size
जब आप स्प्राइट्स के बीच गतिशील रूप से स्विच करना चाहते हैं तो पृष्ठभूमि-छवि का उपयोग करना अच्छा होता है । जैसे यदि आपके पास एक बटन छवि है, और आप एक अलग छवि प्रदर्शित करते हैं, जब कर्सर तत्व पर मँडरा रहा है, तो आप एक पृष्ठभूमि छवि का उपयोग कर सकते हैं जिसमें सामान्य और होवर स्प्राइट दोनों शामिल हैं, और गतिशील रूप से पृष्ठभूमि-स्थिति को बदल सकते हैं।

— एंडर्स रेबो थोरबेक को दर्शाता है
स्रोत

2

यह एक बहुत अच्छा जवाब है, विशेष रूप से आकार परिवर्तन बिंदु। लोग यह तर्क देंगे कि आप पृष्ठभूमि के आकार का उपयोग कर सकते हैं, लेकिन यदि आप पुराने ब्राउज़रों का समर्थन करने की कोशिश कर रहे हैं, तो जरूरी नहीं कि यह सबसे अच्छा तरीका हो।

— dudewad

1

यह कैसे सीएसएस में किया जाता हैbackground-size: 80px 80px;

— करीम

2

साभार @Kareem मुझे लगता है कि यह CSS3 के साथ पेश किया गया था, जो मूल रूप से जवाब देने पर अभी तक मौजूद नहीं था। मैंने इसे दर्शाने के लिए अपना उत्तर संपादित कर दिया है।

— एंडर्स रबो थोरबेक

मुझे यह ध्यान रखना महत्वपूर्ण है कि फ़ोटो का आकार बदलना पिक्सेलकरण या प्रक्षेप के संदर्भ में मुश्किल हो सकता है। जब संभव हो, मैं आपकी छवि को फोटो इमेजिंग सॉफ्टवेयर में लाने के बिना 40% से अधिक का आकार परिवर्तन नहीं करूंगा (और यह एक खिंचाव - 20% मानक है) गुणवत्ता को खोने के बिना ठीक से आकार देने के लिए फोटो इमेजिंग सॉफ्टवेयर में बदल दिया जाएगा। डीपीआई की गुणवत्ता यहां महत्वपूर्ण हो सकती है यदि पिक्सल की आवंटित राशि को खींचने और भरने के लिए पर्याप्त जानकारी नहीं है।

— डेल लैंड्री

18

<IMG> टैग का उपयोग करने से एक और लाभ एसईओ से संबंधित है - यानी आप छवि टैग के ALT विशेषता में छवि के बारे में अतिरिक्त जानकारी प्रदान कर सकते हैं, जबकि CSS के माध्यम से छवि को निर्दिष्ट करते समय ऐसी जानकारी प्रदान करने का कोई तरीका नहीं है और इसमें केवल खोज इंजन द्वारा छवि फ़ाइल नाम अनुक्रमित किया जा सकता है। ALT विशेषता निश्चित रूप से CSS दृष्टिकोण पर <IMG> टैग एसईओ लाभ देता है। इसीलिए मेरे अनुसार <IMG> टैग का उपयोग करके उन छवियों को निर्दिष्ट करना बेहतर है जिन्हें आप छवि खोज परिणामों (जैसे Google छवि खोज) में अच्छी रैंक करना चाहते हैं।

— पावेल व्लादोव
स्रोत

पृष्ठभूमि-चित्र ALT मूल्यों को साइटमैप में परिभाषित किया जा सकता है। google.com/schemas/sitemap-image/1.1

— करीम

17

अग्रभूमि = img।

पृष्ठभूमि = सीएसएस पृष्ठभूमि।

— CJK
स्रोत

5

ज़रूर, लेकिन "मेनू" बटन, या अन्य ऐसे तत्वों के बगल में थोड़ा नीचे-तीर संकेतक के बारे में क्या। आप इसे कैसे वर्गीकृत करते हैं- अग्रभूमि या पृष्ठभूमि?

— dudewad

@dudewad मैं अग्रभूमि कहूंगा, क्योंकि वे (नेत्रहीन) पृष्ठ के "शीर्ष" परत में हैं, अन्य तत्वों के साथ आरोपित।

— जकदेव

14

जब आवश्यक हो तो पृष्ठभूमि छवियों का उपयोग करें।

IMAGES का उपयोग करके एक प्रमुख PROS यह है कि यह SEO के लिए बेहतर है ।

— मार्क उबरस्टीन
स्रोत

3

शायद इसलिए कि आप पूरी विशेषता का उपयोग कर सकते हैं।

— डेविड

4

क्या यह निर्भर नहीं करता है कि आप उस विशिष्ट छवि के लिए एसईओ चाहते हैं? मैं नहीं देखता कि आप SEO के लिए एक ऐसी छवि पर क्यों जाएंगे जो पृष्ठ की स्टाइलिंग का हिस्सा है, न कि सामग्री (उदाहरण के लिए आपके संपर्क पृष्ठ पर एक ईमेल आइकन)। इसलिए वास्तव में, मैं आपके बयान को इधर-उधर करना चाहूंगा। आवश्यक होने पर केवल IMAGES का उपयोग करें (जो सामग्री-संबंधित, प्रिंट-संबंधित और / या एसईओ-संबंधित हो)।

— Volzy

12

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

<img />ओवरले के साथ एक बड़ी समस्या है। अगर मुझे अपनी छवि पर CSS आंतरिक छाया चाहिए तो क्या होगा box-shadow:inset 0 0 5px rgb(0,0,0,.5)? इस मामले में, चूंकि <img />बाल तत्व नहीं हो सकते हैं, इसलिए आपको स्थिति का उपयोग करने और खाली तत्वों को जोड़ने की आवश्यकता है जो बेकार मार्कअप के लिए समान है।

अंत में, यह काफी स्थितिजन्य है।

— मैट
स्रोत

11

अन्य परिदृश्यों के एक जोड़े का background-imageउपयोग किया जाना चाहिए:

जब आप चाहते हैं कि जब माउस उस पर मँडरा जाए तो छवि बदल जाए।
जब आप छवि में गोल कोनों को जोड़ना चाहते हैं। यदि आप उपयोग करते हैं img, तो छवि गोल कोनों से लीक होती है।

— घूमता है
स्रोत

आप वास्तव में कर सकते हैं:img { border-radius: 10px; }

— रैफ

@RafcioKowalsky आप सही हैं। उन सटीक स्थितियों को याद नहीं रख सकते जिनमें border-radiusकाम नहीं कर रहा था।

— बेहरंग सईदज़ादेह

10

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

— MK_Dev
स्रोत

आप एक छवि टैग के src विशेषता को भी गतिशील रूप से बदल सकते हैं, बस एक वर्ग को बदलने के रूप में आसान है

— रूबेरॉके

3

@sanchothefat, सच है, हालांकि, इस मामले में छवि स्रोत को CSS के बजाय JS में रखा जाना चाहिए। IMO css फ़ाइल फ़ाइल नाम रखने के लिए अधिक उपयुक्त होगी।

— MK_Dev

7

यहां एक तकनीकी विचार है: क्या छवि गतिशील रूप से उत्पन्न होगी? यह <img>HTML में टैग उत्पन्न करने के लिए बहुत आसान होने की तुलना में सीएसएस संपत्ति को गतिशील रूप से संपादित करने की कोशिश करता है।

— ब्रायन एम।
स्रोत

1

और इनलाइन शैलियों के बारे में क्या? यह प्रश्न वास्तव में इस विचार से तय नहीं होना चाहिए।

— viam0Zah

शायद मुझे वाक्यांश इस तरह से होना चाहिए: क्या आप बल्कि एक DOM तत्व या एक तत्व विशेषता के साथ काम करेंगे?

— ब्रायन एम।

शायद '09 में कुंवारा विचार करने लायक है, लेकिन jQuery के साथ यह शायद ही कोई मुद्दा है। तत्वों को स्विच करने की तुलना में एक तत्व पर सीएसएस या कक्षाओं को स्विच करना और भी आसान और अधिक तरल है।

— dfherr

7

छवि के आकार के बारे में क्या? अगर मैं img टैग का उपयोग करता हूं, तो ब्राउज़र छवि को मापता है। अगर मैं css बैकग्राउंड का उपयोग करता हूं, तो ब्राउज़र बड़ी छवि से सिर्फ एक हिस्सा काटता है।

7

CSS TranslateX / Y (HTML को एनिमेट करने का उचित तरीका) का उपयोग करते हुए एनिमेट करने वाली छवियों के संबंध में - यदि आप CSS बैकग्राउंड-इमेज की एक क्रोम टाइमलाइन रिकॉर्डिंग एनिमेटेड बनाम IMG टैग एनिमेटेड कर रहे हैं तो आप देखेंगे कि पेंट का समय सीएसएस के लिए बहुत कम है। पृष्ठभूमि छवियों।

— eivers88
स्रोत

7

एक और कारण है! यदि आपके पास एक उत्तरदायी डिज़ाइन है और मीडिया प्रश्नों के माध्यम से उपकरणों के लिए निम्न, मध्यम और उच्च-रिज़ॉल्यूशन छवियों का उपयोग विभाजित करना चाहते हैं, तो आपको पृष्ठभूमि का उपयोग करना चाहिए।

— मार्टेन
स्रोत

1

maarten, terscheling Pipeable नहीं है जो मैंने विंसेंट विलेम्स से सुना है। तो आपको कैसे लगता है कि यह PyMol

— Mehdi Nellen

1

कृपया प्रलेखन को देखें कि यह कैसे पाइप करने योग्य है कि यह pieterpeitshoeve.nl/rondleiding

— Maarten

@ मेरिटीन, मुझे लगता है कि अब html 5 चित्र और स्रोत टैग का उपयोग करके किया जा सकता है

— टिक 20

6

इसके अलावा, मेरे पास एक गैलरी अनुभाग है जिसमें असंगत चित्र आकार हैं, भले ही उन छवियों को स्पष्ट रूप से सामग्री माना जाता है, मैं पृष्ठभूमि छवियों का उपयोग करता हूं और उन्हें सेट आकार के साथ divs में केंद्रित करता हूं। यह वैसा ही है जैसा कि उनके एल्बमों में facebook करता है।

— क्रिस
स्रोत

6

img किसी कारण से html टैग है, इसलिए इसका उपयोग किया जाना चाहिए। चीजों को संदर्भित करने या चित्रित करने के लिए, जैसे लोग: लेखों में।

इसके अलावा अगर छवि का कोई अर्थ है या क्लिक करने योग्य होना है तो एक img एक css पृष्ठभूमि से बेहतर है । अन्य सभी स्थितियों के लिए, मुझे लगता है, एक सीएसएस पृष्ठभूमि का उपयोग किया जा सकता है।

हालांकि, यह एक ऐसा विषय है जिस पर बार-बार चर्चा करने की जरूरत है।

पेरिस, फ्रांस से वेब छात्र

— user589956
स्रोत

5

यदि आप उपयोगकर्ताओं को 'राइट क्लिक' और 'सेव-इमेज' / 'सेव-पिक्चर' में सक्षम होना चाहते हैं, तो यदि आप इमेज को एक संसाधन के रूप में उपलब्ध कराने का इरादा रखते हैं, तो बस आपको जोड़ने के लिए एक छोटा सा प्रयोग करना चाहिए, अन्य।

पृष्ठभूमि छवि का उपयोग करना (जहां तक मैं अधिकांश ब्राउज़रों पर जागरूक हूं) छवि को सीधे बचाने के लिए विकल्प को अक्षम करें।

— dougajmcdonald
स्रोत

5

एक छोटा सा इनपुट, मुझे उत्तरदायी छवियों के साथ समस्या आई है, जो एक मिनट के लिए iPhone पर रेंडरिंग को धीमा कर देती है, यहां तक कि छोटी छवियों के साथ भी:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

लेकिन जब पृष्ठभूमि छवियों का उपयोग करने के लिए स्विच करना समस्या दूर हो गई, तो यह केवल व्यवहार्य है अगर नए ब्राउज़रों को लक्षित किया जाए।

— winthers
स्रोत

क्या आपके पास इस व्यवहार के लिए कोई समर्थन या स्पष्टीकरण है?

— टोड

क्षमा करें, मुझे नहीं पता कि यह पृष्ठ को क्रॉल तक धीमा क्यों करेगा .. शायद iPhone पर ब्राउज़र में फिर से प्रवाह के पास बहुत कम संसाधन हैं।

— विजेता

4

IMGपहले लोड करें क्योंकि srchtml फ़ाइल में ही है, जबकि background-imageस्रोत के मामले में स्टाइलशीट में उल्लेख किया गया है इसलिए स्टाइलशीट लोड होने के बाद छवि लोड होती है, जिससे वेबपेज लोड होने में देरी होती है।

— Sagi_Avinash_Varma
स्रोत

प्लस कुछ ब्राउज़र (जैसे फ़ायरफ़ॉक्स 35) background-imageकुछ समय के बाद सीएसएस को ताज़ा करने के लिए लगता है : यदि आपके पास कई टैब खुले हैं, जब आप कुछ समय के बाद सीएसएस पृष्ठभूमि पर कुछ समय के लिए अपने टैब पर वापस जाते हैं।

— स्किप्पी ले ग्रांड गौरौ

3

HTML सामग्री के लिए है और CSS डिजाइन के लिए है। क्या छवि आवश्यक है और क्या इसे स्क्रीन पाठकों द्वारा उठाया जाना चाहिए? यदि उत्तर हाँ है, तो छवि को HTML में रखें। यदि यह विशुद्ध रूप से स्टाइल के लिए है, तो आप छवि को इंजेक्ट करने के लिए सीएसएस में पृष्ठभूमि-छवि संपत्ति का उपयोग कर सकते हैं। जैसे कि यहाँ बहुत सारे लोग पहले ही उल्लेख कर चुके हैं, आप चाहें तो छवि पर छद्म तत्व का उपयोग कर सकते हैं।

— carltonstith
स्रोत

3

यह भी ध्यान दें कि अधिकांश खोज इंजन मकड़ियों सीएसएस पृष्ठभूमि छवियों को अनुक्रमणित नहीं करते हैं इसलिए पृष्ठभूमि छवियों को अनदेखा किया जाएगा और आप खोज इंजन से कोई ट्रैफ़िक प्राप्त नहीं कर पाएंगे (संक्षेप में कोई एसईओ लाभ नहीं)।

जहां टैग के साथ परिभाषित सभी छवियों को अनुक्रमित किया जाता है (जब तक कि मैन्युअल रूप से बाहर नहीं किया जाता है) और खोज इंजन से ट्रैफ़िक ला सकते हैं यदि उनके शीर्षक / Alt विशेषताओं और फ़ाइल नाम को ठीक से अनुकूलित किया गया हो (कुछ कीवर्ड को राइट करें)।

— नदीम खान
स्रोत

2

आप IMG टैग का उपयोग कर सकते हैं यदि आप चाहते हैं कि छवियाँ तरल हों और विभिन्न स्क्रीन आकारों में पैमाने पर हों। मेरे लिए ये चित्र ज्यादातर सामग्री का हिस्सा हैं। अधिकांश तत्वों के लिए जो सामग्री का हिस्सा नहीं हैं, मैं डाउनलोड आकार को कम से कम रखने के लिए सीएसएस स्प्राइट्स का उपयोग करता हूं जब तक कि मैं वास्तव में आइकन को चेतन नहीं करना चाहता आदि।

— shingokko
स्रोत

2

मैं पृष्ठभूमि-छवि के बजाय छवि का उपयोग करता हूं जब मैं उन्हें 100% स्ट्रेचेबल बनाना चाहता हूं जो अधिकांश ब्राउज़रों में समर्थित है।

— अधिकतम
स्रोत

2

यदि आप केवल पृष्ठ पर विशेष सामग्री के लिए या केवल एक पृष्ठ के लिए एक छवि जोड़ना चाहते हैं, तो आपको IMG टैग का उपयोग करना चाहिए और यदि आप एक से अधिक पृष्ठों पर छवि रखना चाहते हैं, तो आपको CSS Background Image का उपयोग करना चाहिए।

— विशाल गुप्ता
स्रोत

2

एक और पृष्ठभूमि छवि प्रो: पृष्ठभूमि / छवियों के लिए <ul>/ <ol>सूची।

यदि वे समग्र-डिज़ाइन का हिस्सा हैं और कई पृष्ठों पर दोहराए गए हैं, तो पृष्ठभूमि चित्रों का उपयोग करें। अधिमानतः अनुकूलन के लिए पृष्ठभूमि स्प्राइट फ़ॉर्म में।

उन सभी छवियों के लिए टैग्स का उपयोग करें जो समग्र डिजाइन का हिस्सा नहीं हैं, और सबसे अधिक संभावना एक बार रखी गई हैं, जैसे लेखों, लोगों और महत्वपूर्ण छवियों के लिए विशिष्ट छवियां जो जोड़े जाने योग्य हैं। Google छवियों में हैं।

** केवल दोहराया छवि है कि मैं एक में संलग्न है <img> टैग है साइट / कंपनी का लोगो है। क्योंकि लोग इसे मुखपृष्ठ पर जाने के लिए क्लिक करते हैं, इस प्रकार आप इसे एक <a>टैग के साथ लपेटते हैं ।

— गिली
स्रोत