कैसे पृष्ठभूमि DIV केवल सीएसएस

Question

का उपयोग कर रहा सीएसएस attrubutes उपयोग कर रहा हूँ पारदर्शी बनाने के लिए:

filter: alpha(opacity=90);  

अस्पष्टता: .9;

डीआईवी पारदर्शी बनाने के लिए, लेकिन जब मैं इस डीआईवी के अंदर एक और डीआईवी जोड़ता हूं तो यह इसे पारदर्शी बनाता है।

मैं बाहरी (पृष्ठभूमि) DIV केवल पारदर्शी बनाना चाहता हूं। कैसे ?

Answer 1

फिडल: http://jsfiddle.net/uenrX/1/

बाहरी DIV की अस्पष्टता संपत्ति भीतरी DIV द्वारा पूर्ववत नहीं किया जा सकता है।

बाहरी div: आप पारदर्शिता हासिल करना चाहते हैं, तो rgba या hsla का उपयोग

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/ 

इनर div:

background-color: #FFF; /* Background white, to override the background propery*/ 

संपादित
क्योंकि आपको अपने प्रश्न का filter:alpha(opacity=90) जोड़ दिया है , मुझे लगता है कि आप IE (पुराने संस्करणों) के लिए एक समाधान समाधान भी चाहते हैं। यह (आईई के नवीनतम संस्करण के लिए -ms- उपसर्ग) काम करना चाहिए:

/*Padded for readability, you can write the following at one line:*/ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF"); 

/*Similarly: */ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF"); 

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

var opacity = .9; 
var A_ofARGB = Math.round(opacity * 255).toString(16); 
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB; 
else if(!A_ofARGB.length) A_ofARGB = "00"; 
alert(A_ofARGB); 

Answer 2

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

Answer 3

के साथ खेलना होगा, मुझे नहीं पता कि यह बदल गया है या नहीं। लेकिन मेरे अनुभव से। घोंसले के तत्वों के पास पितरों के बराबर अधिकतम अस्पष्टता होती है।

कौन सा मतलब है:

<div id="a"> 
<div id="b"> 
</div></div> 

Div#a has 0.6 opacity 
div#b has 1 opacity 

है # ब्लॉक #a के भीतर है तो यह अधिकतम अस्पष्टता है हमेशा 0.6

# ब्लॉक 0.5 अस्पष्टता होता है। बदले में यह 0.6 * 0.5 == 0.3 अस्पष्टता

Answer 4

मुझे एक ही समस्या थी, यह वह समाधान है जिसके साथ मैं आया था, जो कि बहुत आसान है!

थोड़ा 1px x 1px पारदर्शी छवि बनाएं और इसे एक .png फ़ाइल के रूप में सहेजें।

background:transparent url('/images/trans-bg.png') repeat center top; 

अपने पारदर्शी छवि के लिए फ़ाइल पथ को बदलने के लिए याद रखें:

अपने DIV के लिए सीएसएस में, इस कोड का उपयोग करें।

मुझे लगता है कि यह समाधान सभी ब्राउज़रों में काम करता है, शायद आईई 6 को छोड़कर, लेकिन मैंने परीक्षण नहीं किया है।

Answer 5

.modalBackground 
    { 

     filter: alpha(opacity=80); 
     opacity: 0.8; 
     z-index: 10000; 
    } 

Answer 6

background-image:url('image/img2.jpg'); 
background-repeat:repeat-x; 

उपयोग आंतरिक छवि के लिए कुछ छवि और इस का उपयोग करें।

Answer 7

बस उस div के लिए पृष्ठभूमि रंग शामिल न करें और यह पारदर्शी होगा।

Answer 8

<div id="divmobile" style="position: fixed; background-color: transparent; 
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">