CSS में div background का कलर पारदर्शी कैसे बनाये

Question

मैं CSS3 का उपयोग नहीं कर रहा हूँ। इसलिए मैं उपयोग opacityया filterविशेषताएँ नहीं कर सकता । इन विशेषताओं का उपयोग किए बिना मैं कैसे background-colorपारदर्शी बना सकता हूं div? इस लिंक में टेक्स्ट बॉक्स का उदाहरण होना चाहिए । यहां टेक्स्ट बॉक्स बैकग्राउंड कलर पारदर्शी है। मैं समान बनाना चाहता हूं, लेकिन उपर्युक्त विशेषताओं का उपयोग किए बिना।

Comments

न तो opacityहै और न ही filterसीएसएस 3 विशेषताएँ हैं। आपको क्यों लगता है कि आप उनका उपयोग नहीं कर सकते हैं?

— पेका

मुझे नहीं पता, मेरे ग्रहण जूनो में दोनों विशेषताओं को नहीं दिखाया गया है और W3School के अनुसार: नोट: सीएसएस अपारदर्शिता संपत्ति W3C CSS3 की सिफारिश का एक हिस्सा है। यहां

— मिस्टु 4u

और मेरा ग्रहण सीएसएस 3 का समर्थन नहीं करता है (शायद सबसे ज्यादा) !! :(

— मिस्टु ४u ०

मैं कहूंगा कि आप उन संदेशों को अनदेखा कर सकते हैं। कुछ विशेषताएँ ऐनक के बाहर हैं लेकिन वास्तविक दुनिया में अभी भी प्रयोग करने योग्य हैं। जैसा कि यहां दिखाया गया है opacity, filterऔर कुछ अन्य विशेषताओं का एक संयोजन : css-tricks.com/css-transparency-settings-for-all-broswers वहाँ हर ब्राउज़र को बहुत कवर करेगा

— Pekka

सीएसएस अपारदर्शिता के

— डेव जार्विस

Answer 1

अपारदर्शिता आपको पारभासी या पारदर्शिता प्रदान करती है। एक उदाहरण देखें फिडल यहां ।

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

नोट: ये CSS3 के गुण नहीं हैं

Http://css-tricks.com/snippets/css/cross-browser-opacity/ देखें

Comments

"तो मैं अस्पष्टता या फ़िल्टर विशेषताओं का उपयोग नहीं कर सकता"

— Jerska

@ जर्सका एक ऐसा आधार है, जिसे सवाल करने की जरूरत है। उनका उन गुणों का उपयोग न करने का एकमात्र कारण यह प्रतीत होता है कि उनकी IDE उनके बारे में शिकायत कर रही है

— Pekka

तो क्या कोई और तरीका है कि हम इसे स्वीकार करें?

— मिस्टु ४u

@ सुबीर अगर आपको दूसरे तरीके की ज़रूरत है, तो जरस्का का जवाब देखें। लेकिन जैसा कि कहा गया है, यह संदिग्ध है कि आप opacityपहले स्थान पर क्यों बचना चाहते हैं ।

— पीका

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

— रेने

Answer 2

इसके साथ समस्या opacityयह है कि यह सामग्री को भी प्रभावित करेगा, जब आप अक्सर ऐसा नहीं चाहते हैं।

यदि आप चाहते हैं कि आपका तत्व पारदर्शी हो, तो यह वास्तव में उतना ही आसान है:

background-color: transparent;

लेकिन अगर आप चाहते हैं कि यह रंगों में हो, तो आप इसका उपयोग कर सकते हैं:

background-color: rgba(255, 0, 0, 0.4);

या दाईं ओर सहेजी 1pxगई पृष्ठभूमि छवि ( द्वारा 1px) परिभाषित करें alpha।
(ऐसा करने के लिए, उपयोग करें Gimp, Paint.Netया कोई अन्य छवि सॉफ़्टवेयर जो आपको ऐसा करने की अनुमति देता है।
बस एक नई छवि बनाएं, पृष्ठभूमि को हटा दें और इसमें एक अर्ध-पारदर्शी रंग डालें, फिर इसे पीएनजी में सहेजें।)

के कहे अनुसार रेने , तो सबसे अच्छा होगा दोनों का मिश्रण करने के साथ होगा rgbaपहला और 1pxसे 1pxएक वापस आने के रूप में छवि यदि ब्राउज़र अल्फा का समर्थन नहीं करता:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

यह भी देखें : http://www.w3schools.com/cssref/css_colors_legal.asp ।

डेमो : माई जेएसफिल्ड

Comments

अन्य उत्तर पर टिप्पणी के रूप में भी टाइप किया गया। सबसे अच्छी बात यह होगी कि इस जवाब में rgba रंग और वर्णित png का उपयोग किया जाएगा।

— रेने

पृष्ठभूमि-रंग विशेषता पर 'पारदर्शी' का उपयोग करने की सादगी पर दुष्टता। मेगा कुडोस!

— tfont

Answer 3

पारदर्शी पृष्ठभूमि-रंग के लिए डिफ़ॉल्ट है

http://www.w3schools.com/cssref/pr_background-color.asp

Comments

हाँ। बैकगोरंड-रंग पर एमडीएन कल्पना के अनुसार , बैकगोरंड-रंग का प्रारंभिक मूल्य पारदर्शी है, और यह एक अंतर्निहित संपत्ति नहीं है। तो, डिफ़ॉल्ट पारदर्शी है।

— डैन क्रोन

Answer 4

से https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

पृष्ठभूमि का रंग सेट करने के लिए:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

Answer 5

यह चर्चा में थोड़ी देर हो सकती है लेकिन अनिवार्य रूप से कोई इस पद पर ठोकर खाएगा जैसे मैंने किया था। मुझे वह उत्तर मिल गया जिसकी मुझे तलाश थी और मैंने सोचा कि मैं इस पर अपना खुद का पोस्ट डालूंगा। निम्नलिखित JSfield में पारदर्शिता के साथ .PNG को परत करने का तरीका शामिल है। तलाक के सीएसएस के लिए पारदर्शिता विशेषता का जर्सका उल्लेख समाधान था: http://jsfiddle.net/jyef3bqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

सीएसएस:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

जे एस:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

और मेरी मूल प्रेरणा: http://jsfiddle.net/5g1zwLe3/ मैंने भी पारदर्शी पीएनजी बनाने के लिए, या बल्कि पारदर्शी बीजी के साथ पीएनजी के लिए पेंट.नेट का उपयोग किया है।

Answer 6

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */

Comments

कृपया अपने उत्तर के लिए कुछ स्पष्टीकरण दें और केवल उत्तर पोस्ट करने से बचें।

— सईद ज़ियानी 6