सीएसएस पृष्ठभूमि छवि पूरी विशेषता

Question

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

जहाँ तक मुझे पता है कि इस तरह की कोई सीएसएस संपत्ति नहीं है, तो कृपया इसे करने का सबसे अच्छा तरीका क्या है?

Comments

आप यह AFAIK नहीं कर सकते। आप शायद titleपृष्ठभूमि छवि (ओं) के साथ तत्व में कुछ विशेषता जोड़ सकते हैं , लेकिन यह सभी तत्वों के लिए कोई मतलब नहीं है। आपको ऐसा करने की आवश्यकता क्यों है? क्या आप उन छवियों को संभालने की कोशिश कर रहे हैं जो लोड नहीं करते हैं, या क्या आप उन लोगों पर टूलटिप लगाने की कोशिश कर रहे हैं जो करते हैं?

— 15

मैं इसे अभी भी डाल <div>दूंगा यदि यह मान्य नहीं करता है तो भी आपको इसमें चाबी मिल जाएगी और Google इसे प्यार करता है।

Answer 1

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

होटल लिस्टिंग आइकन के लिए सुविधाओं को प्रदर्शित करना काफी आम है। एक ऐसे पृष्ठ की कल्पना करें जिसमें 50 होटल सूचीबद्ध हैं और प्रत्येक होटल में 10 सुविधाएं थीं। सीएसएस स्प्राइट इस तरह की चीज़ के लिए एकदम सही होगा - बेहतर उपयोगकर्ता अनुभव क्योंकि यह तेज़ है। लेकिन आप इन चित्रों के लिए ALT टैग कैसे लागू करते हैं? उदाहरण साइट ।

इसका उत्तर यह है कि वे altपाठ का उपयोग बिल्कुल नहीं करते हैं , लेकिन इसके बजाय titleयुक्त div पर विशेषता का उपयोग करते हैं ।

एचटीएमएल

<div class="hotwire-fitness" title="Fitness Centre"></div>

सीएसएस

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

W3C (ऊपर लिंक देखें) के अनुसार, शीर्षक विशेषता उच्चतम विशेषता के समान उद्देश्य के लिए कार्य करती है

शीर्षक

शीर्षक विशेषता का मान विभिन्न तरीकों से उपयोगकर्ता एजेंटों द्वारा प्रदान किया जा सकता है। उदाहरण के लिए, दृश्य ब्राउज़र अक्सर शीर्षक को "टूल टिप" के रूप में प्रदर्शित करते हैं (एक छोटा संदेश जो तब प्रदर्शित होता है जब पॉइंटिंग डिवाइस किसी ऑब्जेक्ट पर रुकता है)। ऑडियो उपयोगकर्ता एजेंट एक समान संदर्भ में शीर्षक जानकारी बोल सकते हैं। उदाहरण के लिए, लिंक पर विशेषता सेट करना उपयोगकर्ता एजेंटों (दृश्य और गैर-दृश्य) को उपयोगकर्ताओं को लिंक किए गए संसाधन की प्रकृति के बारे में बताने की अनुमति देता है:

alt

ऑल्ट विशेषता को टैग के एक सेट (अर्थात्, इनपुट और एप्लेट के लिए वैकल्पिक रूप से, क्षेत्र और वैकल्पिक रूप से) में परिभाषित किया गया है, ताकि आप ऑब्जेक्ट के लिए एक टेक्स्ट प्रदान कर सकें।

एक पाठ समतुल्य आपकी वेबसाइट और उसके आगंतुकों के लिए निम्नलिखित सामान्य स्थितियों में निम्नलिखित लाभ लाता है:

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

Comments

अच्छा जवाब, इसी तरह के सवाल का हल: कुछ अतिरिक्त के साथ।

— एनी मेनन

यह भी ध्यान रखना महत्वपूर्ण है कि एडीए आज्ञाकारी वेबसाइटों के लिए छवियों के पास टैग होना चाहिए !!!

— cpcdev

ब्लास्ट टूलटिप्स के बारे में क्या?

— जोएल फैरिस

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

— BoltClock

Answer 2

इस याहू डेवलपर नेटवर्क ( संग्रहीत लिंक ) लेख में यह सुझाव दिया गया है कि यदि आप बिल्कुल img तत्व और Alt विशेषता के बजाय पृष्ठभूमि-छवि का उपयोग करना चाहते हैं, तो ARIA विशेषताओं का उपयोग इस प्रकार करें:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

लेख में उपयोग मामला बताता है कि फ़्लिकर ने पृष्ठभूमि चित्रों का उपयोग करने के लिए कैसे चुना क्योंकि मोबाइल उपकरणों पर प्रदर्शन में बहुत सुधार हुआ था।

Comments

मुझे लगता है कि फ्लिकर का असली इरादा छवियों को डाउनलोड करना कठिन था, लेकिन मैं एआरआईए लेबलिंग से सहमत हूं।

— C

याहू डेवलपर नेटवर्क लेख का लिंक अब उपलब्ध नहीं है। एक अद्यतन या वैकल्पिक लिंक के लिए कोई मौका?

— एंटोनी 4

@ एंटोनी 4 यहां देखें: web.archive.org/web/20160728160132/https://developer.yahoo.com/…

— Ian Lunn

Answer 3

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

अंश (जोर मेरा):

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

मैं उसके साथ सहमत हूँ।

Comments

धन्यवाद कोरी। यह एक बहुत अच्छा लेख था और क्लाइंट को यह समझाने के लिए पर्याप्त था कि पृष्ठभूमि छवियों में पूरी तरह से विशेषता नहीं हो सकती है।

— सिक्सफूट स्टूडियो

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

— अहानिबेकाड

इसके अलावा, आप उन छवियों के साथ स्प्रीटेम्प्स नहीं कर सकते हैं जिन्हें बदलने की आवश्यकता है

— ahnbizcad

तो, क्या आप सामान्य टैग के साथ background-sizeऔर background-positionशैलियों का उपयोग कर सकते हैं <img>? ये आपकी पृष्ठभूमि की छवियों को काफी लचीला बनाते हैं, उदाहरण के लिए, एक उत्तरदायी हीरो स्पेस में, जहां छवि की संभावना में महत्वपूर्ण रूप से महत्वपूर्ण संदेश होता है।

— जेफ वार्ड

मैं देखता हूं कि सामग्री के लिए img टैग का उपयोग किया जाना चाहिए। ऑब्जेक्ट-फिट और ऑब्जेक्ट-फिल के लिए अच्छा क्रॉस-ब्राउज़र समर्थन होने तक, हालांकि, पृष्ठभूमि-छवि को खोदने के लिए यह यथार्थवादी नहीं है।

— स्किटरम

Answer 4

जैसा कि अन्य उत्तरों में उल्लेख किया गया है, केवल img टैग के लिए div टैग के लिए कोई (समर्थित) alt विशेषता नहीं है।

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

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

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

एसईओ / खोज इंजन: यहाँ एक बड़ा है, अगर आप मेरे जैसे थे, तो आपने अपनी पृष्ठभूमि छवियां जोड़ीं, सब अच्छा था। फिर महीनों बाद ग्राहक (या शायद खुद को) एहसास हुआ कि आप अपनी छवियों के लिए कुछ भी नहीं होने से कुछ प्रमुख एसईओ सोने को याद कर रहे हैं। ध्यान रखें, शीर्षक विशेषता का मेरे शोध से, खोज इंजन पर कोई भार नहीं है और जैसा कि यहां एक लेख में बताया गया है: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /। इसलिए यदि आप SEO के लिए लक्ष्य बना रहे हैं, तो आपको alt विशेषता वाले एक img टैग की आवश्यकता होगी। एक संभव तरीका यह है कि पूरी विशेषताओं के साथ साइट पर बहुत छोटी वास्तविक छवियों को लोड किया जाए, इस तरह से आप सभी एसईओ प्राप्त करते हैं और जगह में मौजूदा सीएसएस को पढ़ने के लिए नहीं है। हालाँकि, इससे आकार के आधार पर अतिरिक्त लोड समय हो सकता है और अनुक्रमण करते समय चित्र पथ पर Google वास्तव में दिखता है। संक्षेप में यदि आप इस मार्ग पर जा रहे हैं, तो बस स्वीकार करें कि क्या करना है और पृष्ठभूमि का उपयोग करने के बजाय वास्तविक चित्रों को शामिल करें।

Answer 5

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

Comments

आपके इनपुट के लिए भी धन्यवाद!

— सिक्सफूट स्टूडियो

वे आम तौर पर अंधे लोगों के लिए हैं

— डोमिनिक

Answer 6

इसे प्राप्त करने का शास्त्रीय तरीका यह है कि पाठ को div में रखें और एक छवि प्रतिस्थापन तकनीक का उपयोग करें।

<div class"ir background-image">Your alt text</div>

पृष्ठभूमि छवि के साथ वह वर्ग जहाँ आप पृष्ठभूमि छवि प्रदान करते हैं और ir HTML5boilerplates चित्र प्रतिस्थापन वर्ग हो सकता है, नीचे:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Answer 7

W3C का यह लेख बताता है कि आपको क्या लगता है कि आपको https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundIageage करना चाहिए

और यहाँ उदाहरण हैं http://mars.dequecloud.com/demo/ImgRole.htm

उन में से कौनसा

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

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

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

Answer 8

यहाँ इस प्रकार की समस्या का समाधान है:

CSS में एक नया क्लास बनाएं और स्क्रीन को ऑफ करें। फिर अपनी पृष्ठभूमि छवि को कॉल करने वाली संपत्ति से ठीक पहले HTML में अपना संपूर्ण पाठ डालें। किसी भी टैग किया जा सकता है, H1, H2, p, आदि

सीएसएस

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

एचटीएमएल

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Answer 9

यह मेरे लिए स्पष्ट नहीं है कि आप क्या चाहते हैं।

यदि आप उच्चतम विशेषता मान प्रदान करने के लिए CSS संपत्ति चाहते हैं, तो शायद आप उदाहरण के लिए CSS विशेषता फ़ंक्शन की तलाश कर रहे हैं :

IMG:before { content: attr(alt) }

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

आपको "पृष्ठभूमि छवियों पर कुल टैग का उपयोग करने की आवश्यकता क्यों है": यह एक अर्थपूर्ण कारण के लिए या कुछ दृश्य-प्रभाव कारण के लिए है (और यदि ऐसा है, तो क्या प्रभाव या क्या कारण है)?

Comments

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

— सिक्सफूट स्टूडियो

Answer 10

आप अपनी छवि दिखाई देने वाली जगह पर altटैग लगाकर इसे प्राप्त कर सकते divहैं।

उदाहरण:

<div id="yourImage" alt="nameOfImage"></div>

Comments

के रूप में आप को नहीं जोड़ सकते यह मान्य नहीं होगा altएक विशेषता<div>

— अहमद Alfy

कभी नहीं सुना कि हम altविशेषता जोड़ सकते हैं div!!

— अजय कुलकर्णी