बाल तत्वों को प्रभावित किए बिना पृष्ठभूमि छवि की अस्पष्टता निर्धारित करें

Question

क्या बाल तत्वों की अस्पष्टता को प्रभावित किए बिना पृष्ठभूमि की छवि की अस्पष्टता को स्थापित करना संभव है?

उदाहरण

पाद में सभी लिंक को एक कस्टम बुलेट (पृष्ठभूमि छवि) की आवश्यकता होती है और कस्टम बुलेट की अपारदर्शिता 50% होनी चाहिए।

एचटीएमएल

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

सीएसएस

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

मैंने क्या कोशिश की है

मैंने सूची आइटम की अस्पष्टता को 50% पर सेट करने की कोशिश की, लेकिन फिर लिंक टेक्स्ट की अपारदर्शिता भी 50% है - और बाल तत्वों की अस्पष्टता को रीसेट करने का एक तरीका नहीं लगता है:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

मैंने भी rgba का उपयोग करने की कोशिश की, लेकिन इससे पृष्ठभूमि की छवि पर कोई प्रभाव नहीं पड़ता है:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Comments

stackoverflow.com/a/6502295/218125

— साइपर मार्फ

संबंधित stackoverflow.com/q/806000/759452

— Adrien Be

Answer 1

आप सीएसएस का उपयोग कर सकते linear-gradient()के साथ rgba()।

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

Comments

यह सबसे अच्छा उपाय है!

— डोजेनिस एच।

Answer 2

अपनी छवि को एक छवि संपादक में ले जाएं, अस्पष्टता को बंद करें, इसे .png के रूप में सहेजें और इसके बजाय इसका उपयोग करें।

Comments

हम्म ... मैं बस निराश हो गया, लेकिन इस स्वीकृत उत्तर को देखें: stackoverflow.com/a/6502295/131809 10 बार अपवित्र, और बहुत अधिक समान।

— एलेक्स

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

— रॉब

@mystrdat आप पहले से ही छवि डाउनलोड कर रहे हैं, यह एक अतिरिक्त अनुरोध नहीं है।

— ब्रैड

@mystrdat लेकिन वह पहले से ही तीर छवि डाउनलोड कर रहा है। आपने एक गैर-छवि समाधान प्रदान नहीं किया है, इसलिए यह मेरी बात थी। वह पहले से ही तीर की छवि को डाउनलोड कर रहा है, यह आवश्यकतानुसार आ सकता है, जो अतिरिक्त अनुरोध नहीं होगा। मुझे समझ नहीं आ रहा है कि आप कहाँ से आ रहे हैं।

— शरद

@ ब्रैड मैं माफी माँगता हूँ, मुझे पता चला है कि मैंने इस सवाल को गलत पढ़ा है कि मैंने फिर से जाँच की।

— 15

Answer 3

यह हर ब्राउज़र के साथ काम करेगा

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

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

Http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ पर डेमो देखें

Comments

मुझे लगता है कि सीधे कॉपी-पेस्ट किए जाने पर काम करने के लिए आपको "उपरोक्त कोड में उद्धरण" को बदलने की आवश्यकता है।

— nsantorello

क्या यह उत्तर अभी भी सबसे अच्छा समाधान लोगों की समस्या के लिए मिला है: "कैसे एक बच्चे के तत्व को मूल तत्व सीएसएस अस्पष्टता मूल्य विरासत में नहीं मिला"? मुझे बच्चे को वास्तव में एक बच्चा होने की आवश्यकता है .. और दस्तावेज़ प्रवाह में ... और इसके लिए जावास्क्रिप्ट / फ्लैश में भी नहीं लाना चाहते हैं; शुद्ध सीएसएस पसंद करते हैं।

— गोविंदा

मेरे पास 50% अपारदर्शी माता-पिता <li> की बाल छवियां हैं, जो मुझे 100% अपारदर्शी चाहिए। <Li> को position:relative;और img को सेट position:absolute;करने से मुझे img पर विरासत में मिली अपारदर्शिता को ओवरराइड करने की अनुमति नहीं मिलती है, और मैं <li> के स्वयं के लिए पूर्ण स्थिति का उपयोग नहीं कर सकता (यह एक गड़बड़ है;; जावास्क्रिप्ट में मैंने कोशिश की imgs[i].style.opacity = '1';, लेकिन यह भी विरासत में मिली अपारदर्शिता को ओवरराइड करने के लिए काम नहीं करता है। अगर मैं सही तरीके से समझूं, तो मैं भी आरजीबीए का उपयोग नहीं कर सकता, क्योंकि मुझे केवल एक पृष्ठभूमि रंग ही नहीं, खुद को भी प्रभावित करना होगा। किसी ने मेरे लिए एक सिफारिश है?

— गोविंदा

इस पूरे जवाब का कोई मतलब नहीं है। दिए गए कोड, ठीक-ठाक होने के कारण जो पूछने वाले को नहीं चाहिए क्योंकि यह काम नहीं करता है , विवरण या लिंक से मेल नहीं खाता है। मुझे यह समझने में बहुत मुश्किल समय हो रहा है कि इतने सारे लोगों ने इसे क्यों उखाड़ा है।

— BoltClock

यदि प्रश्न था 'किसी तत्व पर 50% पारदर्शिता कैसे स्थापित करें', तो यह एक अच्छा उत्तर होगा।

— लार्बी

Answer 4

यदि आप छवि को बुलेट के रूप में उपयोग कर रहे हैं, तो आप इस पर विचार कर सकते हैं: छद्म तत्व से पहले।

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Comments

फ़िल्टर केवल एक IE समाधान है

— हुसैन

मुझे लगता है कि यह शायद सबसे अच्छा समाधान है। यह एक शुद्ध सीएसएस समाधान है। IE7 समर्थन का उपयोग करके हैक करना भी संभव है *zoom: expression( … );(देखें : इसके बाद और: css छद्म तत्वों IE 7 के लिए हैक करने से पहले ), लेकिन IE7 अंत में निष्क्रिय होता जा रहा है।

— थर्डेंडर

Answer 5

आप छवि को div में रख सकते हैं: after या div: पहले और उस "आभासी div" पर अस्पष्टता सेट करें

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

यहाँ पाया गया http://css-tricks.com/snippets/css/transparent-background-images/

Answer 6

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

अपारदर्शिता के साथ हैक .99 (1 से कम) z- इंडेक्स संदर्भ बनाता है ताकि आप वैश्विक z- इंडेक्स मानों के बारे में चिंता न कर सकें। (इसे हटाने की कोशिश करें और देखें कि अगले डेमो में क्या होता है, जहां पैरेंट रैपर में पॉजिटिव z-index होता है।)
यदि आपके एलिमेंट में पहले से ही z- इंडेक्स है, तो आपको इस हैक की जरूरत नहीं है।

इस तकनीक का डेमो ।

Comments

क्या आप जानते हैं कि हमें अस्पष्टता के लिए कम से कम 1 मूल्य निर्धारित करने की आवश्यकता क्यों है? क्या यह एक क्रॉस-ब्राउज़र समाधान है?

— zVictor

@zVictor हाँ, यह w3c- मानकीकृत व्यवहार है। देखें समझना सीएसएस z- सूचकांक: स्टैकिंग संदर्भ ।

— उपयोगकर्ता

Answer 7

दुर्भाग्य से, इस उत्तर को लिखने के समय, ऐसा करने का कोई सीधा तरीका नहीं है । आपको:

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

Answer 8

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

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 9

IE7 / 8 के लिए काम करने के लिए "फ़िल्टर" संपत्ति को दोगुने के बजाय अपारदर्शिता के प्रतिशत के लिए पूर्णांक की आवश्यकता होती है।

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

पुनश्च: मैं इसे एक उत्तर के रूप में पोस्ट करता हूं, एसओ के बाद से, एक संपादन के लिए कम से कम 6 परिवर्तित वर्णों की आवश्यकता होती है।

Answer 10

चीजों को वास्तव में ठीक करने के लिए, मैं ब्राउज़र-लक्ष्यीकरण आवरण में उपयुक्त चयन रखने की सलाह देता हूं। यह केवल एक चीज थी जो मेरे लिए काम करती थी जब मुझे IE7 और IE8 को "दूसरों के साथ अच्छी तरह से खेलने" के लिए नहीं मिल सकता था (जैसा कि मैं वर्तमान में एक सॉफ्टवेयर कंपनी के लिए काम कर रहा हूं जो उनका समर्थन करना जारी रखता है)।

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

उपरोक्त कोड में मेरे पास अतिरेक हो सकता है - अगर कोई इसे और साफ करना चाहता है, तो इसे स्वतंत्र महसूस करें!

Comments

प्रत्येक ब्राउज़र को अलग से लक्षित करना अनावश्यक है, बस एकल चयनकर्ता ब्लॉक के अंदर ब्राउज़र उपसर्गों का उपयोग करें। ब्राउज़र उपसर्गों के साथ, ब्राउज़र केवल उचित सीएसएस संपत्ति का उपयोग करेगा। जैसे ही समय बीतता है और उस संपत्ति के लिए सिंटैक्स मानकीकृत हो जाता है, ब्राउज़र विक्रेता उपसर्गों के लिए समर्थन छोड़ देंगे और बिना किसी उपसर्ग के सीएसएस संपत्ति का उपयोग करेंगे (उदाहरण के लिए, -moz-border-radiusफ़ायरफ़ॉक्स 13 में फ़ायरफ़ॉक्स ने समर्थन छोड़ दिया और अभी मानक border-radiusसंपत्ति की तलाश करता है)। IE7 और IE8 एक अलग कहानी है, लेकिन यह सिर्फ IE :-p

— thirdender

मैं जानना चाहता हूं कि किसने इसे वोट किया और क्यों, कृपया। सूचनात्मक प्रतिक्रिया के बिना वोट बेकार है। मैं अपने उत्तरों को सुधारने में सक्षम होना चाहता हूं। यदि यह सिर्फ इसलिए था कि जानकारी पुरानी थी, तो कृपया तारीख जांचें। :) धन्यवाद।

— कोड-सुशी

@ कोड-सुशी: यदि डाउनवोट आपकी टिप्पणी के अनुसार एक ही समय में हुआ है, तो विचार करें कि यह किसी और से हुआ हो सकता है जो थर्डेंडर की टिप्पणी से सहमत हुआ हो (टिप्पणी पर खुद ही टिप्पणी कर सकता है)। मैंने आपके उत्तर पर वोट नहीं दिया, लेकिन मुझे सहमत होना है - मैं यह जोड़ना चाहूंगा कि 1) KHTML कभी नहीं देखेगा -khtml-opacityक्योंकि यह मीडिया क्वेरी को नहीं समझता है, इसे 2 बेकार कर रहा है) IE आपके विचार से अधिक स्थिर है; यह केवल "ब्लो" नहीं करेगा क्योंकि आप IE पर लागू होने वाले नियम में गैर-IE उपसर्ग जोड़ते हैं। समस्या, जिस समय आपने इसका सामना किया, वह कहीं और से आया होगा।

— BoltClock

मेरा मूल उत्तर लगभग 2 साल पहले था और डाउन वोट हाल ही में हुआ था, इस साल की तरह। मैं बिलकुल उत्सुक था। IE टिप्पणियों के लिए के रूप में वे 7 से संबंधित है कि अभी भी समर्थन की जरूरत है; मुझे पूरा यकीन है कि इन दिनों IE 7 को अनदेखा करना ज्यादातर मामलों में ठीक है। आपकी प्रतिक्रिया के लिए धन्यवाद।

— कोड-सुशी

Answer 11

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

Answer 12

बस ऊपर जोड़ने के लिए..आप नए रंग विशेषताओं उदा जैसे अल्फा चैनल का उपयोग कर सकते हैं। rgba (0,0,0,0) ठीक है इसलिए यह काला है लेकिन शून्य अपारदर्शिता के साथ एक अभिभावक के रूप में यह बच्चे को प्रभावित नहीं करेगा। यह केवल Chrome, FF, Safari और .... I thin O पर काम करता है।

अपने हेक्स रंगों को RGBA में बदलें

Comments

यह background-imageओपी द्वारा अनुरोध के अनुसार काम नहीं करेगा ।

— टॉरस्टेन वाल्टर

Answer 13

मुझे इस मुद्दे के बारे में बहुत अच्छा और सरल ट्यूटोरियल मिला। मुझे लगता है कि यह बहुत अच्छा काम करता है (और हालांकि यह IE का समर्थन करता है, मैं अपने ग्राहकों को अन्य ब्राउज़रों का उपयोग करने के लिए कहता हूं):

RGB बैकग्राउंड पारदर्शिता बाल तत्वों को प्रभावित किए बिना RGBa और फ़िल्टर के माध्यम से

वहां से आप ग्रेडिएंट सपोर्ट आदि जोड़ सकते हैं।

Comments

ठीक है, यह सीधे काम नहीं करेगा। आपको पृष्ठभूमि-रंग के साथ एक अलग तत्व के रूप में एक div डालनी होगी: (255,255,255,0.5) उदाहरण के लिए

— फ्रांसिस्को '

Answer 14

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

आप इस कोड को आज़मा सकते हैं। मुझे लगता है कि यह काम किया जाएगा। आप डेमो पर जा सकते हैं