सीएसएस एक पारदर्शी div

बनाएँ क्या कोई div HTML तत्व आधा पारदर्शी बनाने का कोई तरीका है?सीएसएस एक पारदर्शी div

2011-02-13 Bogdan Verbenets

एक पारदर्शी कंटेनर के लिए नकारात्मक पक्ष यह है:

एक उदाहरण है, यहाँ एक कम से कम उदाहरण our website पर है। मैं आपको किसी भी सामग्री के साथ इस के शीर्ष पर एक और कंटेनर रखने की सलाह देता हूं। बेशक, यदि आप div के अंदर कुछ भी नहीं डाल रहे हैं, तो आप अच्छे हैं। –

पृष्ठभूमि पीएनजी फ़ाइल का उपयोग करना जो आधा पारदर्शी है, और उम्मीद है कि आपको आईई 6 का समर्थन नहीं करना है?

स्रोत

2011-02-13 00:53:45 user268396

मैं थोड़ा उलझन में हूँ। क्या पृष्ठभूमि छवि को div के लिए पृष्ठभूमि के रूप में उपयोग किया जाएगा, या इसे किसी भी तरह div के शीर्ष पर रखा जाएगा? –

सीएसएस के साथ

, इस पार ब्राउज़र समाधान है

div { 
    opacity: 0.5; 
    filter: alpha(opacity = 0.5); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); 
}

स्रोत

2011-02-13 00:55:07 jcubic

मेरे विचार से बेहतर, बहुत ज्यादा। – user268396

यह हर ब्राउज़र

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/

स्रोत

2011-02-13 01:19:24 Hussein

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

वहाँ पाठ नहीं पारदर्शी बनाने के लिए एक रास्ता है: मैं की तरह मार्कअप है? संदर्भित आलेख में पूर्ण स्थिति है और भाई कंटेनर का उपयोग करता है, लेकिन मैं हाइपरटेक्स्ट मार्कअप को नहीं बदल सकता। –

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

यदि आप केवल पृष्ठभूमि अपने div अर्द्ध पारदर्शी के नहीं चाहते हैं, नहीं इसके अंदर कोई भी पाठ और तत्व, आप बस एक पृष्ठभूमि रंग को पारदर्शी-एक (यानी। अल्फा < 1) के साथ। div की सभी सामग्री, पाठ, चित्र, आदि की तरह, यह भी पारदर्शी हो जाएगा -

<html> 
<head> 
    <title>Transparency test</title> 
    <style type="text/css"> 
    body { 
     background-image: url(http://www.fencing-game.de/style/background6.png); 
    } 
    #trans { 
     background-color: rgba(255,0,0,0.5); 
     max-width: 80ex; 
    } 
    p { 
    max-width: 70ex; 
    margin: auto; 
    } 
    #nontrans { 
     background-color: rgb(255,255, 0); 
    } 
    </style> 
</head> 
<body> 
    <div id="trans"> 
    <p>normal text</p> 
    <p id="nontrans">nontransparent</p> 
    <p>normal text</p> 
    </div> 
</body>

स्रोत

2011-03-15 18:07:14

यह कुछ भी लायक नहीं है कि यह तकनीक IE6, IE7 और IE8 के लिए काम नहीं करती है। इसके लिए यहां एक हैक है: http://dimox.net/cross-browser-rgba-support/ – soulkphp

सीएसएस एक पारदर्शी div

उत्तर

संबंधित मुद्दे