जवाबों:
एक png बनाएं जो 1x1 पिक्सेल (धन्यवाद तीसवाँ) से बड़ा हो, और जो आपकी पृष्ठभूमि की पारदर्शिता से मेल खाता हो।
संपादित करें: IE6 + समर्थन के लिए वापस गिरने के लिए, आप png के लिए bkgd chunk निर्दिष्ट कर सकते हैं, यह एक रंग है जो सही अल्फा पारदर्शिता की जगह लेगा यदि यह समर्थित नहीं है। आप इसे उदाहरण के लिए जिम्प के साथ ठीक कर सकते हैं।
1x1: stackoverflow.com/questions/7764751/…
IE में RGBA और HSLA पृष्ठभूमि का अनुकरण करने के लिए, आप एक ग्रेडिएंट फ़िल्टर का उपयोग कर सकते हैं, एक ही शुरुआत और अंतिम रंग के साथ (अल्फा चैनल HEX के मूल्य में पहली जोड़ी है)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */मेरा मानना है कि यह सबसे अच्छा है क्योंकि इस पृष्ठ पर अल्फा-पारदर्शी पृष्ठभूमि उत्पन्न करने में आपकी सहायता करने के लिए एक उपकरण है:
" क्रॉस ब्राउज़र अल्फा पारदर्शी बैकग्राउंड CSS (आरजीबीए) " (* अब आर्काइव.ओआरजी से जुड़ा)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}आईई 6- में पारदर्शी पीएनजी छवि काम नहीं करेगी, विकल्प हैं:
सीएसएस के साथ:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}या बस इसे jQuery के साथ करें:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});हालांकि देर से, मुझे लगता है कि आज का इस्तेमाल किया था और एक बहुत ही उपयोगी php स्क्रिप्ट नहीं मिली यहाँ इतना जिस तरह से काम करता है RGBA की तरह, आप गतिशील रूप से एक png फ़ाइल बनाने के लिए अनुमति देगा।
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);स्क्रिप्ट यहां डाउनलोड की जा सकती है: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
मुझे पता है कि यह हर किसी के लिए सही समाधान नहीं हो सकता है, लेकिन यह कुछ मामलों में विचार करने योग्य है, क्योंकि यह बहुत समय बचाता है और निर्दोष रूप से काम करता है। आशा है कि किसी की मदद करता है!
rgba? या क्या यह हमेशा सभी उपयोगकर्ताओं द्वारा अनुरोध किया जाता है, और बस नहीं दिखाया जाता है?
CSS में ज्यादातर सभी ब्राउज़र सपोर्ट RGBG कोड हैं लेकिन केवल IE8 और उससे नीचे का स्तर RGBa css कोड को सपोर्ट नहीं करता है। इसके लिए यहाँ समाधान है। समाधान के लिए आपको इस कोड का पालन करना चाहिए और यह अनुक्रम के साथ जाना बेहतर है अन्यथा आपको अपनी इच्छानुसार सही आउटपुट नहीं मिलेगा। इस कोड का उपयोग मेरे द्वारा किया गया है और यह ज्यादातर सही है। अगर यह सही है तो टिप्पणी करें।
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}आप अस्पष्टता को बदलने के लिए css का उपयोग करते हैं। IE के साथ सामना करने के लिए आपको कुछ इस तरह की आवश्यकता होगी:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}लेकिन इसके साथ एकमात्र समस्या यह है कि इसका मतलब है कि कंटेनर के अंदर कुछ भी 0.3 अपारदर्शिता होगा। इस प्रकार आपको अपने HTML को एक अन्य कंटेनर में बदलना होगा, न कि पारदर्शी एक के अंदर, जो आपकी सामग्री रखता है।
अन्यथा png तकनीक, काम करेगी। सिवाय आपको IE6 के लिए एक फिक्स की आवश्यकता होगी, जो अपने आप में समस्याएं पैदा कर सकता है।
rgba()संस्करण 3 तक समर्थन नहीं किया , और ओपेरा ने संस्करण 10. तक इसका समर्थन नहीं किया
मुझे पार्टी के लिए देर हो रही है, लेकिन किसी और के लिए जो इसे ढूंढता है - यह लेख बहुत उपयोगी है: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
यह ठोस लेकिन पारदर्शी रंग प्रदर्शित करने के लिए ढाल फिल्टर का उपयोग करता है।
rgbaIE में पृष्ठभूमि का उपयोग करने के लिए एक फॉलबैक है।
हमें फ़िल्टर प्रॉपर्टी का उपयोग करना होगा। वह उपयोग करता हैARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;इसके लिए गिरावट है rgba(255, 255, 255, 0.2)
अपने #33ffffffअनुसार बदलो ।
ARGBलिएRGBAयह बहुत ही सरलता से आपको पहले आपको आरजीबी के रूप में बैकगाउंड देना होगा क्योंकि इंटरनेट एक्सप्लोरर 8 आरजीबी के बजाय आरजीबी का समर्थन करेगा और फिर यू को अपारदर्शिता देनी होगी filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);आईई एक्स सहित अधिकांश ब्राउज़रों के लिए यह एक पारदर्शिता समाधान है
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}सबसे अच्छा समाधान जो मुझे अब तक मिला है, वह डेविड जे मारलैंड ने अपने ब्लॉग में प्रस्तावित किया है , पुराने ब्राउज़रों में अस्पष्टता का समर्थन करने के लिए (IE+):
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}बहुत खोज करने के बाद, मुझे निम्नलिखित समाधान मिला जो मेरे मामलों में काम कर रहा है:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}* महत्वपूर्ण: RGB से ARGB (IE के लिए) की गणना करने के लिए, हम ऑनलाइन टूल का उपयोग कर सकते हैं:
rgba()IE 8. में रंग मानों का समर्थन नहीं किया गया है