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

Question

मैं IE 8 में निहित तत्व को प्रभावित किए बिना div की पृष्ठभूमि की Opacity सेट करना चाहता हूं। कोई भी समाधान है और 1 X 1 .Png छवि को सेट करने और उस छवि की अस्पष्टता का जवाब देने के लिए जवाब नहीं देता क्योंकि मैं गतिशील अस्पष्टता और रंग व्यवस्थापक का उपयोग कर सकता हूं। उस

मैं उस का उपयोग किया, लेकिन IE 8 में काम नहीं कर रहा

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

तथा

rgba(0,0,0,0.3)

भी।

Comments

आप ऐसा नहीं कर सकते। संपत्ति की अस्पष्टता आपके तत्व (अन्य HTML तत्व + पाठ) की सभी सामग्री को प्रभावित करती है। लेकिन मुझे समझ नहीं आ रहा है कि आप png का उपयोग क्यों नहीं करना चाहते हैं। आपको केवल छवि को एक साथ बदलना होगा क्योंकि आप सीएसएस बदलते हैं (क्योंकि मुझे लगता है, आपके पास अलग सीएसएस है जिसे व्यवस्थापक द्वारा स्विच किया जा सकता है)

— एल्फोरिन

@ कोरम: आप कितने गलत हैं (जितना मैं था)। हो सकता है। इस ब्लॉग पोस्ट को देखें। robertnyman.com/2010/01/11/… अविश्वसनीय रूप से चतुर।

— रॉबर्ट कोरिटनिक

बस यहाँ पोस्ट किया गया: < stackoverflow.com/a/11755175/1491212 > यह मुझे आशा है कि मदद कर सकता है!

— आर्मेल लार्सर

Answer 1

opacityशैली पूरे तत्व है और सब कुछ के भीतर प्रभावित करता है। इसका सही उत्तर इसके बजाय एक आरजीबीए पृष्ठभूमि रंग का उपयोग करना है।

सीएसएस काफी सरल है:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... जहां पहले तीन नंबर आपकी पृष्ठभूमि के रंग के लिए लाल, हरे और नीले रंग के मान हैं, और चौथा 'अल्फा' चैनल मान है, जो मान के समान काम करता है opacity।

अधिक जानकारी के लिए यह पेज देखें: http://css-tricks.com/rgba-browser-support/-

डाउन-साइड, यह है कि यह IE8 या कम में काम नहीं करता है। मेरे द्वारा जोड़ा गया पृष्ठ कुछ अन्य ब्राउज़रों को भी सूचीबद्ध करता है जो इसमें काम नहीं करते हैं, लेकिन वे अब तक बहुत पुराने हैं; IE6 / 7/8 को छोड़कर वर्तमान उपयोग के सभी ब्राउज़र rgba रंगों के साथ काम करेंगे।

अच्छी खबर यह है कि आप IE को इसके साथ काम करने के लिए मजबूर कर सकते हैं, CSS3Pie नामक हैक का उपयोग कर सकते हैं । CSS3Pie IE के पुराने संस्करणों में कई आधुनिक CSS3 सुविधाओं को जोड़ता है, जिसमें आरजीबीए पृष्ठभूमि रंग शामिल हैं।

पृष्ठभूमि के लिए CSS3Pie का उपयोग करने के लिए, आपको -pie-backgroundअपने CSS के साथ-साथ PIE behaviorशैली में एक विशिष्ट घोषणा जोड़ने की आवश्यकता है , ताकि आपकी स्टाइलशीट इस तरह दिखे :

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

उम्मीद है की वो मदद करदे।

[संपादित करें]

जैसा कि इसके लायक है, जैसा कि दूसरों ने उल्लेख किया है, आप कीवर्ड के filterसाथ IE की शैली का उपयोग कर सकते हैं gradient। CSS3Pie समाधान वास्तव में पर्दे के पीछे इसी तकनीक का उपयोग करता है, लेकिन आपको IE के फिल्टर के साथ सीधे गड़बड़ करने की आवश्यकता को हटा देता है, इसलिए आपकी स्टाइलशीट बहुत अधिक स्वच्छ हैं। (यह अन्य अच्छी विशेषताओं का एक पूरा गुच्छा भी जोड़ता है, लेकिन यह इस चर्चा के लिए प्रासंगिक नहीं है)

Comments

प्रतिभाशाली! इससे मुझे बहुत मदद मिली।

— जॉर्डन स्टारक

Answer 2

यह केवल सरल है जो आपके पास है वह देना है

background: rgba(0,0,0,0.3)

और IE के लिए इस फिल्टर का उपयोग करें

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

आप यहाँ से अपना rgba फ़िल्टर उत्पन्न कर सकते हैं http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Comments

अपारदर्शिता के साथ ग्रेडिएंट्स का क्या करना है? : एस

— रॉबर्ट कोरिटनिक

@ रोबर्ट कोरीटनिक: इस उत्तर के मेरे संस्करण को बेहतर स्पष्टीकरण के लिए देखें - stackoverflow.com/questions/5160419/… यहाँ भी: stackoverflow.com/questions/4788564/…

— तीस

@robert, यह एक केवल IE फ़िल्टर है जो वेब में उपलब्ध है यह उसी तरह का प्रभाव देता है जैसे कि rgba ने दिया और मैं फ़िल्टर विशेषज्ञ नहीं हूं।

— संदीप

; @Robert यह सिर्फ काम करता है) इस लिंक को देख ); - @sandeep मैं, आवश्यक सामग्री (पारदर्शी पृष्ठभूमि और hasLayout) जोड़ने के लिए फ़िल्टर का क्रम बदलने फिल्टर कोड तय .. अगर आप सहमत नहीं हूँ रोलबैक के लिए स्वतंत्र महसूस

— clairesuzy

@sandeep फिल्टर्स बिना हैलेयूट के काम नहीं करेंगे, हो सकता है आपके पास अपने कोड में एक और हैलैट प्रॉपर्टी हो, चौड़ाई हो सकती है? मैं एक-हाथ का काम कर रहा हूँ..मेरे कलाई पर इसलिए मेरे धीमे जवाब देता है, लेकिन यहाँ दो तरीकों की तुलना के लिए एक सशर्त टिप्पणी में प्रासंगिक IE कोड के साथ jsfiddle

— clairesuzy

Answer 3

opacity मूल तत्व पर यह पूरे उप डोम पेड़ के लिए सेट करता है

आप वास्तव में कुछ तत्व के लिए अस्पष्टता निर्धारित नहीं कर सकते हैं जो कि वंशजों के लिए भी कैस्केड नहीं करेंगे। यही नहीं सीएसएस opacityकाम करता है मुझे डर है।

आप क्या कर सकते हैं कि एक कंटेनर में दो भाई तत्व हों और पारदर्शी एक की स्थिति निर्धारित करें:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

फिर आपको पारदर्शी सेट करना position: absolute/relativeहोगा ताकि इसकी सामग्री सिबलिंग को इसके ऊपर प्रस्तुत किया जा सके।

rgba रंगीन पृष्ठभूमि की पृष्ठभूमि पारदर्शिता कर सकते हैं

rgbaतत्व की background-colorइच्छा पर रंग सेटिंग निश्चित रूप से काम करती है, लेकिन यह आपको केवल पृष्ठभूमि के रूप में रंग का उपयोग करने के लिए सीमित करेगी। मुझे कोई डर नहीं। यदि आप ग्रेडिएंट स्टॉप रंग प्रदान करते हैं तो आप बेशक CSS3 ग्रेडिएंट का उपयोग कर सकते हैं rgba। वह भी काम करता है।

लेकिन सलाह है कि rgbaअपने आवश्यक ब्राउज़रों द्वारा समर्थित नहीं हो सकता है।

चेतावनी-मुक्त मोडल संवाद कार्यक्षमता

लेकिन अगर आप पूरे पृष्ठ को किसी प्रकार के मास्किंग के बाद करते हैं, तो यह आमतौर पर एक अलग जोड़ द्वारा किया जाता है div शैलियों के इस सेट के साथ :

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

फिर जब आप सामग्री प्रदर्शित करते हैं तो यह अधिक होनी चाहिए z-index। लेकिन ये दोनों तत्व भाई-बहन या किसी भी चीज़ के संबंध में नहीं हैं। वे वैसे ही प्रदर्शित होते हैं जैसे उन्हें होना चाहिए। एक के ऊपर एक।

Comments

यह सही उत्तर है, bg-images के साथ भी काम कर रहा है

— Botea Florin

Answer 4

निहित तत्व पर उच्च z- इंडेक्स सेट करने का प्रयास करें।

Answer 5

इस दृष्टिकोण के बारे में क्या:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

Answer 6

हो सकता है कि अधिक सरल उत्तर हो, आप किसी भी पृष्ठभूमि रंग को कोड की तरह जोड़ना चाहते हैं, जैसे पृष्ठभूमि-रंग: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Comments

यह सामग्री को भी प्रभावित कर रहा है!

— जर्मा विंसमोके

Answer 7

जब आप पूर्णता के अलावा अन्य पदों के साथ अपारदर्शिता सुविधा का उपयोग करते हैं, तो यह पूरे बाल विभाग को प्रभावित करता है। तो इसे प्राप्त करने का एक और तरीका है कि एक-दूसरे के अंदर divs न डालें और फिर divs के लिए पूर्ण स्थिति का उपयोग करें। ऊपरी div के लिए किसी भी पृष्ठभूमि रंग का उपयोग न करें।

Answer 8

RGBA का उपयोग करें या यदि आप हेक्स कोड है तो इसे rgba में बदलें। कुछ presodu तत्व सीएसएस करने की आवश्यकता नहीं है ।

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

सीएसएस ---------

background-color: #fff;
opacity: 0.8;

या

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;