मैं सीएसएस का उपयोग करके पाठ या छवि को पारदर्शी पृष्ठभूमि कैसे दे सकता हूं?

2283

क्या यह संभव है, केवल सीएसएस का उपयोग करके, backgroundएक तत्व को अर्ध-पारदर्शी बनाने के लिए लेकिन तत्व अपारदर्शी की सामग्री (पाठ और चित्र) है?

मैं पाठ और पृष्ठभूमि को दो अलग-अलग तत्वों के बिना पूरा करना चाहता हूं।

जब कोशिश कर रहा हो:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

स्निपेट का विस्तार करें

ऐसा लगता है कि बाल तत्व अपने माता-पिता की अस्पष्टता के अधीन हैं, इसलिए माता-पिता के opacity:1सापेक्ष है opacity:0.6।

html css opacity

— Stijn सैंडर्स
स्रोत

16

अफसोस की बात है, CSS3 नए रंग मॉड्यूल के साथ इसे ठीक करने का लक्ष्य बना रहा है, यह आपको एक अल्फा वैल्यू निर्दिष्ट करने की अनुमति देगा जब भी आप एक रंग को राज्य करते हैं। w3.org/TR/css3-color

— meandmycode

71

दरअसल, बच्चे के तत्व की अस्पष्टता को मूल तत्व की अस्पष्टता से गुणा किया जाता है , ओवरराइड नहीं किया जाता है। इसलिए उदाहरण के लिए यदि p'अपारदर्शिता' थी .6और span'अस्पष्टता' थी .5तो पाठ की वास्तविक अस्पष्टता अवधि में होगी 0.3।

— छरवे

1

ऐसा लगता है, लेकिन जब से यह पारदर्शी है पृष्ठभूमि है, तो आप भी फिल्टर / अस्पष्टता की जरूरत नहीं है: codepen.io/anon/pen/ksJug

— Stijn Sanders

5

@ अगर मैं opacity:.5माता-पिता और opacity:2बाल तत्व के लिए परिभाषित करता हूं तो क्या होना चाहिए ?

— अलेक्जेंडर

10

@Alexander, मुझे खुशी है कि आपने वह प्रश्न पूछा है। गणित के अनुसार, एक शक बच्चे 1. हालांकि का एक अस्पष्टता के लिए वापस लौट आते हैं, opacity:2;है अमान्य सीएसएस । opacityसंपत्ति का मूल्य समावेशी सीमा [0,1] के भीतर होना चाहिए।

— छरवे

2276

या तो एक अर्ध-पारदर्शी PNG छवि का उपयोग करें या CSS 3 का उपयोग करें:

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

यहाँ css3.info, Opacity, RGBA और समझौता (2007-06-03) का एक लेख दिया गया है ।

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

स्निपेट का विस्तार करें

— पीटर मोर्टेंसन
स्रोत

86

क्या हेक्स रंगों के साथ ऐसा करना संभव है? # फाफ की तरह?

— GRM

35

@grm: W3C ने #RRGGBBAA हेक्स कोड प्रारूप पेश करने पर विचार किया, लेकिन उन्होंने (विभिन्न कारणों से) ऐसा नहीं करने का फैसला किया, इसलिए हम नहीं कर सकते।

— दिसबंर

95

साथ @grm एस.ए.एस.एस. आप कर सकते हैं,background-color: rgba(#000, .5);

— जुरगेन पॉल

2

वर्थ इंगित करता है कि यदि आप पारदर्शिता का उपयोग करना चाहते हैं, तो RGBA का समर्थन करने वाला प्रत्येक ब्राउज़र HSLA का भी समर्थन करता है , जो कि कहीं अधिक सहज रंग मानचित्रण है। IE8 एकमात्र pseudosignificant ब्राउज़र है जो इसका समर्थन करने में विफल रहता है, इसलिए यह वर्जित है कि आगे बढ़ें और हर रंग के लिए HSL (A) का उपयोग करें।

— आयनों

19

@outis: खुशखबरी, #RRGGBBAA अब कलर लेवल 4 में है ।

— BoltClock

476

फ़ायरफ़ॉक्स 3 और सफ़ारी 3 में, आप RGB Schllly जैसे उल्लेख किया जा सकता है ।

थोड़ी ज्ञात चाल यह है कि आप इसे इंटरनेट एक्सप्लोरर में उपयोग कर सकते हैं और साथ ही ग्रेडिएंट फिल्टर का उपयोग कर सकते हैं।

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

पहला हेक्स संख्या रंग के अल्फा मान को परिभाषित करता है।

पूर्ण समाधान सभी ब्राउज़र:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

यह सीजीआरए और फिल्टर के माध्यम से, बाल तत्वों को प्रभावित किए बिना सीएसएस पृष्ठभूमि पारदर्शिता से है ।

स्क्रीनशॉट परिणामों का प्रमाण:

यह निम्नलिखित कोड का उपयोग करते समय होता है:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

क्रोम-33 IE11 IE9 IE8

— एड्रियन रहो
स्रोत

1

लेकिन IE8 में नहीं। मैंने नए -ms-फ़िल्टर सिंटैक्स की कोशिश की, लेकिन यह अभी भी मेरे लिए काम नहीं आया :(

— फिल्पेरो

5

यह पोस्ट यह दिखाता है कि IE8 में यह कैसे किया जाता है: robertnyman.com/2010/01/11/…

— Slapout

14

@philfreo: यदि आप सेबस्टियन के कोड के पहले बिट को "बैकग्राउंड: आरजीबी (0, 0, 0) पारदर्शी;" यह अब IE8 में काम करना चाहिए। यह मुझे काफी समय से परेशान कर रहा था!

— टॉम चैंटलर

फिल्टर: आईई 9. के साथ महान काम करता है। रंग है: पारदर्शिता, लाल, हरा, नीला - सभी दो अंकों के हेक्स मान।

— थोरस्टेन नीह्यूज 9

1

@ AdrienBe - मैंने आपके निर्देशों के अनुसार आपका उत्तर संपादित कर दिया है। दुर्भाग्य से मैं कुछ समय के लिए इस विशेष क्यू एंड ए के शीर्ष स्थान से बाहर रहा हूं, इसलिए मैं इस समय इस बातचीत में नहीं जोड़ सकता।

— user664833

108

यह सबसे अच्छा समाधान है, जो मैं सीएसएस 3 का उपयोग नहीं कर सकता हूं। और यह फ़ायरफ़ॉक्स, क्रोम और इंटरनेट एक्सप्लोरर पर बहुत अच्छा काम करता है जहां तक मैं देख सकता हूं।

एक कंटेनर divऔर दो बच्चों divको एक ही स्तर पर रखो , एक सामग्री के लिए, एक पृष्ठभूमि के लिए। और सीएसएस का उपयोग करके सामग्री को फिट करने के लिए पृष्ठभूमि को आकार दें और जेड-इंडेक्स का उपयोग करके पृष्ठभूमि को वास्तव में पीछे रखें।

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}

<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>

स्निपेट का विस्तार करें

— गोर्केम पचसी
स्रोत

19

उन्होंने कहा "पाठ और पृष्ठभूमि को अलग किए बिना दो तत्वों में एक दूसरे को तैनात किया।" धन्यवाद वैसे भी, यह एक अच्छा फिक्स है और उपयोगी है, लेकिन कुछ मामलों में आप चाहते हैं कि अपारदर्शी तत्व अर्ध-पारदर्शी का बच्चा हो।

— रॉल्फ

मैंने एक और SO प्रश्न पर बहुत समान रूप से उत्तर दिया, लेकिन एक jsfiddle & स्क्रीनशॉट सबूत (IE7 +) को जोड़ा, देखें कि क्या दिलचस्पी stackoverflow.com/a/21984546/759452

— Adrien Be

@Gorkem Pacaci: सुनिश्चित करें कि अस्पष्टता गुण हैं "वास्तव में" क्रॉस-ब्राउज़र, आप CSSTRICKS से इस कोड का उपयोग कर सकते हैं css-tricks.com/snippets/css/cross-browser-opacity

— एड्रियन बनें

इसे छद्म तत्व की तरह क्यों न करें :afterऔर अतिरिक्त मार्कअप से बचें?

— एंडफिशर

64

एक साधारण अर्ध-पारदर्शी पृष्ठभूमि रंग के लिए, उपरोक्त समाधान (CSS3 या bg चित्र) सबसे अच्छा विकल्प हैं। हालाँकि, यदि आप कुछ कट्टर (जैसे एनीमेशन, कई पृष्ठभूमि, आदि) करना चाहते हैं, या यदि आप CSS3 पर भरोसा नहीं करना चाहते हैं, तो आप "फलक तकनीक" आज़मा सकते हैं:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}

<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

तकनीक बाहरी फलक तत्व के अंदर दो "परतों" का उपयोग करके काम करती है:

एक ("बैक") जो सामग्री के प्रवाह को प्रभावित किए बिना फलक तत्व के आकार को फिट करता है,
और एक ("कंट") जिसमें सामग्री शामिल है और फलक का आकार निर्धारित करने में मदद करता है।

position: relativeफलक पर महत्वपूर्ण है, यह फलक के आकार के अनुसार वापस परत बताता है। (आप की जरूरत है टैग पूर्ण होने के लिए, एक से फलक बदलने एक करने के लिए और सभी लपेटो एक पूरी तरह से स्थिति में है कि टैग।)

इस तकनीक का मुख्य लाभ ऊपर सूचीबद्ध समान लोगों पर है, फलक में एक निर्दिष्ट आकार नहीं है; जैसा कि ऊपर कोडित है, यह पूर्ण-चौड़ाई (सामान्य ब्लॉक-तत्व लेआउट) और सामग्री के रूप में केवल उच्च के रूप में फिट होगा। बाहरी फलक तत्व को किसी भी तरह से आप कृपया आकार दे सकते हैं, जब तक यह आयताकार है (यानी इनलाइन-ब्लॉक काम करेगा; सादे-पुराने इनलाइन नहीं करेगा)।

इसके अलावा, यह आपको पृष्ठभूमि के लिए बहुत अधिक स्वतंत्रता देता है; आप पीछे के तत्व में वास्तव में कुछ भी डालने के लिए स्वतंत्र हैं और यह सामग्री के प्रवाह को प्रभावित नहीं करता है (यदि आप कई पूर्ण-आकार के उप-परतें चाहते हैं, तो सुनिश्चित करें कि उनके पास भी स्थिति है: पूर्ण, चौड़ाई / ऊंचाई: 100%, और ऊपर / नीचे / बाएं / दाएं: ऑटो)।

पृष्ठभूमि इनसेट समायोजन (शीर्ष / नीचे / बाएं / दाएं के माध्यम से) और / या पृष्ठभूमि पिनिंग (बाएं / दाएं या शीर्ष / नीचे जोड़े में से एक को हटाने के माध्यम से) की अनुमति देने के लिए एक भिन्नता है:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

जैसा कि लिखा गया है, यह फ़ायरफ़ॉक्स, सफारी, क्रोम, IE8 + और ओपेरा में काम करता है, हालाँकि IE7 और IE6 को अतिरिक्त CSS और अभिव्यक्तियाँ, IIRC की आवश्यकता होती है, और पिछली बार जब मैंने जाँच की थी, तो ओपेरा में दूसरी CSS भिन्नता काम नहीं करती है।

देखने के लिए चीजें:

कंट लेयर के अंदर फ्लोटिंग तत्व समाहित नहीं होंगे। आपको यह सुनिश्चित करने की आवश्यकता होगी कि वे साफ हो गए हैं या अन्यथा निहित हैं, या वे नीचे से फिसल जाएंगे।
हाशिया फलक तत्व पर जाता है और पैडिंग कंटेंट तत्व पर जाता है। विपरीत का उपयोग न करें (कॉन्टेस्ट पर मार्जिन या फलक पर पैडिंग) या आप विषमताओं की खोज करेंगे जैसे पेज हमेशा ब्राउज़र विंडो की तुलना में थोड़ा व्यापक होता है।
जैसा कि उल्लेख किया गया है, पूरी चीज को ब्लॉक या इनलाइन-ब्लॉक करने की आवश्यकता है। अपने सीएसएस को सरल बनाने के <div>बजाय s का उपयोग करने के लिए स्वतंत्र महसूस करें ।

एक फुलर डेमो, इस तकनीक के फ्लेक्सिबलिटी को बंद करके display: inline-block, और दोनों के साथ autoऔर विशिष्ट widths / min-heights के साथ मिलकर इसका उपयोग करके दिखा रहा है।

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }

<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

स्निपेट का विस्तार करें

और यहाँ एक है लाइव डेमो तकनीक का बड़े पैमाने पर इस्तेमाल किया जा रहा:

— स्लिप डी। थॉम्पसन
स्रोत

किस स्थिति में कोई भी इसके लिए CSS3 का उपयोग नहीं करना चाहेगा?

— बुर्कली 91

@ Burkely91 यदि आप इसे CSS3 में कर सकते हैं, तो इसका पूरा उपयोग करें। लेकिन CSS3 की पृष्ठभूमि सभी प्रकार की सामग्री का समर्थन नहीं करती है और न ही पूर्ण लेआउट flexibilty। स्वतंत्र रूप से दोहराए गए किनारों और केंद्र-भरण के कारण CSS3 के साथ ऊपर लिफाफा / पत्र का उदाहरण कठिन होगा। इसके अलावा, ध्यान रखें कि यह उत्तर मूल रूप से 5 साल पहले लिखा गया था, इससे पहले CSS3 का समर्थन व्यापक था।

— स्लिप डी। थॉम्पसन

2

@ इगोर इवांका लुढ़क गई अपने परिवर्तन। मुझे क्षमा करें, मेरे पसंदीदा फॉर्म (टैब) से इंडेंटेशन को आपके (2 रिक्त स्थान) में बदलना अच्छा नहीं है। आपके दिन-प्रतिदिन की कोड परियोजनाओं में 2-स्थान इंडेंटेशन का उपयोग करने का आपके पास अच्छा कारण हो सकता है, लेकिन वेब पर प्रस्तुति के लिए मेरा मानना है कि टैब में स्पष्ट जीत है- गहरा इंडेंटेशन पदानुक्रम के स्तर को समझना आसान बनाता है, और यह बहुत दूर है मज़बूती से टैब को रिक्त स्थान में परिवर्तित करना आसान है और इसलिए सभी पाठकों का अधिक संगत रूप है।

— स्लिप डी। थॉम्पसन

@ इगोर इवांका इसके अलावा, ऐसा प्रतीत होता है कि आपने कोड चलाया, जबकि एक ब्यूटीफायर जिसने प्रत्येक सीएसएस चयनकर्ता और संपत्ति को अपनी लाइन पर रखा। मेरे उदाहरणों को जानबूझकर लाइन ब्रेक के साथ लिखा गया था और तार्किक रूप से समूह के टुकड़ों को रिक्ति के साथ लिखा गया था जिसे पाठक द्वारा एक साथ समझा जाना चाहिए- जैसे कि अधिकांश width:और height:गुण एक पंक्ति साझा करते हैं क्योंकि वे एक ही प्रकार के निर्माण हैं और 2-आयामी आकार के रूप में बेहतर समझे जाते हैं, नहीं 1-आयामी बाधाओं की एक जोड़ी। इसके अलावा, कुछ पंक्तियों में एक उचित मात्रा में पैक किया गया है क्योंकि यह दोहराई गई सामग्री है जो कि दिखाने के लिए महत्वपूर्ण नहीं है।

— स्लिप डी। थॉम्पसन

@ आइगोर इवांका लॉजिकल ऑर्गनाइजेशन, ग्रुपिंग, और स्टाइलिंग लेखन के लिए बेहद महत्वपूर्ण है, जैसा कि सभी तरह के लेखन के साथ है। आपके द्वारा किए गए परिवर्तन किसी भी पोस्ट में जाने और सभी पैराग्राफ को हटाने, और प्रत्येक वाक्य के बाद एक मजबूर न्यूलाइन डालने के बराबर थे। यदि आप चाहते हैं कि आप अपने स्वयं के काम में ईमानदारी से पांडित्य करें, तो ठीक है, आप ऐसा करने के लिए स्वतंत्र हैं। लेकिन कृपया अन्य लोगों के काम में सिमेंटिक कैरेक्टर और एक्सप्रेशन को डम्बल-डाउन न करें।

— स्लिप डी। थॉम्पसन

58

अर्ध-पारदर्शी का उपयोग करना बेहतर है.png ।

बस फ़ोटोशॉप खोलें , एक 2x2पिक्सेल छवि बनाएं ( उठाकर 1x1इंटरनेट एक्सप्लोरर बग पैदा कर सकता है! ), इसे हरे रंग से भरें और "परत टैब" में अस्पष्टता को 60% पर सेट करें। फिर इसे सहेजें और इसे पृष्ठभूमि छवि बनाएं:

<p style="background: url(green.png);">any text</p>

यह सुंदर इंटरनेट एक्सप्लोरर 6 को छोड़कर, निश्चित रूप से अच्छा काम करता है । बेहतर फ़िक्सेस उपलब्ध हैं, लेकिन यहाँ एक त्वरित हैक है:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

— समुदाय
स्रोत

54

मार्कअप को कम करने के लिए एक चाल है: पृष्ठभूमि के रूप में एक छद्म तत्व का उपयोग करें और आप मुख्य तत्व और उसके बच्चों को प्रभावित किए बिना इसे अस्पष्टता निर्धारित कर सकते हैं:

डेमो

आउटपुट:

एक छद्म तत्व के साथ पृष्ठभूमि की अस्पष्टता

प्रासंगिक कोड:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

स्निपेट का विस्तार करें

ब्राउज़र समर्थन इंटरनेट एक्सप्लोरर 8 और बाद में है।

— वेब Tiki
स्रोत

23

सबसे आसान तरीका एक अर्ध-पारदर्शी पृष्ठभूमि पीएनजी छवि का उपयोग करना होगा ।

यदि आप की जरूरत है तो आप इंटरनेट एक्सप्लोरर 6 में काम करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं ।

मैं Internet Explorer 6 में पारदर्शी PNGs में उल्लिखित विधि का उपयोग करता हूं ।

इसके अलावा, आप इसे दो साइड-बाय-साइड सिबलिंग तत्वों का उपयोग करके नकली कर सकते हैं - एक अर्ध-पारदर्शी बनाएं , फिर शीर्ष पर दूसरे को बिल्कुल स्थिति दें ।

— क्रिस
स्रोत

2

मुझे बस एक सरल पृष्ठभूमि रंग की आवश्यकता है, आप इस रंग के साथ पीएनजी के किस आकार का प्रस्ताव रखेंगे? 1x1 रेंडरिंग बहुत काम करेगा, बहुत ज्यादा पिक्सल्स इस PNG को बहुत बड़ा बना देता है (संकुचित होने के बाद इसे ठीक फ़ाइल-आकार में होना चाहिए, लेकिन फिर भी इसे इस्तेमाल करने के लिए इसे

— अनलॉक्ड

3

मैं 30px x 30px की तरह कुछ सुझाता हूँ, जो 1x1 की तुलना में दोहराते समय कम मेमोरी का उपयोग करता है, और बैंडविड्थ उपयोग को कम करने के लिए अभी भी काफी छोटा है।

— क्रिस

21

यह विधि आपको पृष्ठभूमि में एक छवि और न केवल एक ठोस रंग की अनुमति देती है, और अन्य विशेषताओं जैसे कि सीमाओं पर पारदर्शिता रखने के लिए उपयोग किया जा सकता है। कोई पारदर्शी पीएनजी छवियों की आवश्यकता नहीं है।

CSS में :before(या :after) का उपयोग करें और उन्हें इसकी मूल अस्पष्टता पर तत्व छोड़ने के लिए अस्पष्टता मान दें। इस प्रकार आप उपयोग कर सकते हैं: अशुद्ध तत्व बनाने से पहले और इसे पारदर्शी पृष्ठभूमि (या सीमाएं) दें जो आप चाहते हैं और इसे उस सामग्री के पीछे ले जाएं जिसे आप अपारदर्शी रखना चाहते हैं z-index।

एक उदाहरण ( फिडल ) (ध्यान दें कि DIVवर्ग के साथ dadसिर्फ कुछ संदर्भ और रंगों के विपरीत प्रदान करने के लिए है, इस अतिरिक्त तत्व की वास्तव में आवश्यकता नहीं है, और लाल आयत को थोड़ा नीचे ले जाया जाता है और पीछे दिखाई देने वाली पृष्ठभूमि को छोड़ने के लिए दाईं ओर fancyBgतत्व):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

इस सीएसएस के साथ:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

इस मामले में आपके .fancyBg:beforeपास सीएसएस गुण हैं जो पारदर्शिता के साथ चाहते हैं (इस उदाहरण में लाल पृष्ठभूमि, लेकिन एक छवि या सीमाएं हो सकती हैं)। इसे पीछे ले जाने के लिए इसे निरपेक्ष .fancyBgमाना जाता है (शून्य के मूल्यों का उपयोग करें या जो आपकी आवश्यकताओं के लिए अधिक उपयुक्त है)।

— frozenkoi
स्रोत

17

समस्या यह है, कि पाठ वास्तव में है अपने उदाहरण में पूर्ण पारदर्शिता। यह pटैग के अंदर पूर्ण अस्पष्टता है , लेकिन pटैग सिर्फ अर्ध-पारदर्शी है।

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

अन्यथा यह संभव नहीं होगा।

जैसे क्रिस ने उल्लेख किया है: यदि आप पारदर्शिता के साथ पीएनजी फ़ाइल का उपयोग करते हैं, तो आपको पेसकी इंटरनेट एक्सप्लोरर में काम करने के लिए जावास्क्रिप्ट वर्कअराउंड का उपयोग करना होगा ...

— SvenFinke
स्रोत

15

लगभग ये सभी उत्तर यह मानते हैं कि डिजाइनर एक ठोस रंग पृष्ठभूमि चाहता है। यदि डिज़ाइनर वास्तव में एक तस्वीर चाहता है, तो पृष्ठभूमि के रूप में इस समय एकमात्र वास्तविक समाधान जावास्क्रिप्ट है, जैसे कि jQuery के ट्रांसफर प्लगइन कहीं और उल्लेख किया गया है ।

हमें सीएसएस वर्किंग ग्रुप डिस्कशन में शामिल होने और हमें एक बैकग्राउंड-अपारदर्शिता विशेषता प्रदान करने की आवश्यकता है! यह मल्टीपल-बैकग्राउंड फीचर के साथ हाथ से काम करना चाहिए।

— thinsoldier
स्रोत

14

यहां बताया गया है कि मैं यह कैसे करता हूं (यह इष्टतम नहीं हो सकता है, लेकिन यह काम करता है):

वह बनाएं divजिसे आप अर्ध-पारदर्शी बनाना चाहते हैं। इसे एक कक्षा / आईडी दें। इसे खाली छोड़ दें , और इसे बंद करें। इसे एक निर्धारित ऊँचाई और चौड़ाई दें (जैसे, 300 पिक्सेल से 300 पिक्सेल)। इसे 0.5 या आप जो भी पसंद करते हैं, और एक पृष्ठभूमि का रंग दें।

फिर, सीधे उस div के नीचे , एक अलग div / id के साथ एक और div बनाएँ। इसके अंदर एक पैराग्राफ बनाएं, जहां आप अपना टेक्स्ट डालेंगे। divस्थिति दें : सापेक्ष, और शीर्ष: -295px(यह नकारात्मक 295 पिक्सेल है)। अच्छे माप के लिए इसे 2 का z- इंडेक्स दें, और सुनिश्चित करें कि इसकी अस्पष्टता 1. आपकी पसंद के अनुसार अपना पैराग्राफ है, लेकिन सुनिश्चित करें कि आयाम पहले की तुलना में कम हैं, divइसलिए यह अतिप्रवाह नहीं करता है।

बस। यहाँ कोड है:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}

<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

स्निपेट का विस्तार करें

यह सफारी 2 एक्स में काम करता है, लेकिन मुझे इंटरनेट एक्सप्लोरर के बारे में पता नहीं है।

— पेरिस आयनसु
स्रोत

अतिरिक्त तत्व बचा जा सकता है और इसके बजाय की तरह एक छद्म तत्व का उपयोग :beforeया:after

— frozenkoi

12

यहाँ एक jQuery प्लगइन है जो आपके लिए सब कुछ संभाल लेगा, Transify ( स्थानांतरित करें - एक jQuery प्लगइन आसानी से किसी तत्व की पृष्ठभूमि में पारदर्शिता / अस्पष्टता लागू करने के लिए )।

मैं हर बार इस समस्या में चल रहा था, इसलिए मैंने कुछ ऐसा लिखने का फैसला किया, जिससे जीवन बहुत आसान हो जाए। स्क्रिप्ट 2 केबी से कम है और इसे काम करने के लिए केवल एक पंक्ति की आवश्यकता होती है, और यदि आप चाहें तो यह पृष्ठभूमि की अस्पष्टता को भी संभालेगा।

— joren
स्रोत

11

कुछ समय पहले, मैंने इसके बारे में क्रॉस ब्राउज़र बैकग्राउंड ट्रांसपेरेंसी विथ सीएसएस में लिखा था ।

विचित्र इंटरनेट एक्सप्लोरर 6 आपको पृष्ठभूमि को पारदर्शी बनाने और पाठ को पूरी तरह से अपारदर्शी पर रखने की अनुमति देगा। अन्य ब्राउज़रों के लिए मैं फिर एक पारदर्शी पीएनजी फ़ाइल का उपयोग करने का सुझाव देता हूं।

— philnash
स्रोत

10

पृष्ठभूमि की अस्पष्टता, लेकिन पाठ में कुछ विचार नहीं है। या तो एक अर्ध-पारदर्शी छवि का उपयोग करें, या एक अतिरिक्त तत्व को ओवरले करें।

— fearoffours
स्रोत

9

यदि आप एक फ़ोटोशॉप आदमी हैं, तो आप भी उपयोग कर सकते हैं:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

या:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

— सूरज रावत
स्रोत

8

किसी तत्व की पृष्ठभूमि को अर्ध-पारदर्शी बनाने के लिए, लेकिन उस तत्व की सामग्री (पाठ और चित्र) में अपारदर्शी है, आपको उस छवि के लिए सीएसएस कोड लिखना होगा, और आपको एक विशेषता को जोड़ना होगा opacity न्यूनतम मूल्य के साथ ।

उदाहरण के लिए,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// छोटा मान, जितना अधिक पारदर्शी होगा, अयस्क का मूल्य उतना ही कम पारदर्शिता होगा।

— पुष्प सिंह
स्रोत

यह आधुनिक ब्राउज़रों में ऐसा करने का एक तरीका है। मैं इसे एक कमबैक के रूप में आरजीबी के मूल्यों के साथ जोड़ती हूं

— ताहिर खालिद

हाँ सही। यह आधुनिक ब्राउज़र से निपटने का एक तरीका है।

— पुष्प सिंह

"अयस्क का मूल्य कम होने से पारदर्शिता होगी" (यह समझ से बाहर लगता है) से आपका क्या अभिप्राय है ? ( अपने उत्तर को संपादित करके जवाब दें , यहाँ टिप्पणियों में नहीं, यदि उपयुक्त हो।)

— पीटर मोर्टेंसन

7

CSS 3 में आपकी समस्या का आसान समाधान है। उपयोग:

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

यहाँ, rgbaलाल, हरा, नीला और अल्फ़ा मान है। हरा मूल्य 255 के कारण प्राप्त होता है और आधा पारदर्शिता 0.5 अल्फा मान से प्राप्त होता है।

— तौहीद रहमान
स्रोत

यह पिछले कुछ उत्तरों से कैसे भिन्न है?

— पीटर मोर्टेंसन

6

यदि आप कम उपयोग कर रहे हैं , तो आप उपयोग कर सकते हैं fade(color, 30%)।

— एलेक्स
स्रोत

6

पृष्ठभूमि-रंग: rgba (255, 0, 0, 0.5);जैसा कि ऊपर उल्लेख किया गया है सबसे अच्छा जवाब बस डाल दिया है। 2013 में भी CSS 3 का उपयोग करना आसान नहीं है, क्योंकि हर पुनरावृत्ति के साथ विभिन्न ब्राउज़रों के समर्थन का स्तर बदल जाता है।

जबकि background-color सभी प्रमुख ब्राउज़रों (सीएसएस 3 के लिए नया नहीं) द्वारा समर्थित है [1] अल्फा पारदर्शिता मुश्किल हो सकती है, विशेष रूप से संस्करण 9 से पहले इंटरनेट एक्सप्लोरर के साथ और संस्करण 5.1 से पहले सफारी पर सीमा के रंग के साथ। [2]

Compass या SASS जैसी किसी चीज़ का उपयोग करना वास्तव में उत्पादन और प्लेटफ़ॉर्म संगतता को पार करने में मदद कर सकता है।

[१] डब्ल्यू ३ स्कूल: सीएसएस पृष्ठभूमि-रंग संपत्ति

[२] नॉर्मन ब्लॉग: ब्राउज़र सपोर्ट चेकलिस्ट CSS3 (अक्टूबर २०१२)

— विल नीलसन
स्रोत

4

आप ढाल के सिंटैक्स का उपयोग करके इंटरनेट एक्सप्लोरर 8 बाय (अब) के लिए इसे हल कर सकते हैं । रंग प्रारूप ARGB है। यदि आप Sass प्रीप्रोसेसर का उपयोग कर रहे हैं, तो आप बिल्ट-इन फ़ंक्शन "ie-hex-str ()" का उपयोग करके रंग परिवर्तित कर सकते हैं।

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

— हेनरिक
स्रोत

4

आप शुद्ध CSS 3 का उपयोग कर सकते हैं : rgba(red, green, blue, alpha)जहाँalpha आप चाहते हैं पारदर्शिता का स्तर है। जावास्क्रिप्ट या jQuery के लिए कोई ज़रूरत नहीं है।

यहाँ एक उदाहरण है:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

— पीटर मोर्टेंसन
स्रोत

3

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

— premgowda
स्रोत

2

आप इसे rgba color codeनीचे दिए गए उदाहरण जैसे CSS का उपयोग करके कर सकते हैं ।

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}

<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

स्निपेट का विस्तार करें

— रुद्र
स्रोत

1

एक ही div पर एक छवि पर एक ओवरले डालने के लिए एक आसान समाधान है। यह इस उपकरण का सही उपयोग नहीं है। लेकिन CSS का उपयोग करके उस ओवरले को बनाने के लिए एक आकर्षण की तरह काम करता है।

इस तरह एक इनसेट छाया का उपयोग करें:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

बस इतना ही :)

— edd2110
स्रोत

1

आप CSS में RGBA (red, green, blue, alpha) का उपयोग कर सकते हैं । कुछ इस तरह:

तो बस कुछ ऐसा करना आपके मामले में काम करने वाला है:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

— एलिरेज़ा
स्रोत

1

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

background-color: rgba(71, 158, 0, 0.8);

अस्पष्टता के साथ पृष्ठभूमि रंग का उपयोग करें

background-color: rgba(R, G, B, Opacity);

— विनोद कुमार
स्रोत

0

मैं सामान्य रूप से अपने काम के लिए इस वर्ग का उपयोग करता हूं। यह बहुत अच्छा है।

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

स्निपेट का विस्तार करें

— सेंगकुरु माइकल
स्रोत

0

यह मेरे लिए काम करता था जब प्रारूप का उपयोग करता था #AARRGGBBतो मेरे लिए काम कर रहा था #1C00ff00। इसे आज़माएं, क्योंकि मैंने इसे कुछ लोगों के लिए काम करते देखा है और किसी और के लिए काम नहीं किया है। मैं इसे CSS में इस्तेमाल कर रहा हूँ।

— डोनाल्ड शाहिनी
स्रोत

0

आप हेक्साडेसिमल मूल्य से संबंधित अपारदर्शिता मूल्य का उपयोग कर सकते हैं:

background-color: #11ffeeaa;

इस उदाहरण aaमें अस्पष्टता है। 00पारदर्शी और ffसाधन ठोस रंग की एक अस्पष्टता का मतलब है ।

अस्पष्टता वैकल्पिक है, इसलिए आप हमेशा की तरह हेक्साडेसिमल मान का उपयोग कर सकते हैं:

background-color: #11ffee;

आप पुराने तरीके का भी उपयोग कर सकते हैं rgba():

background-color: rgba(117, 190, 218, 0.5);

और backgroundआशुलिपि यदि आप यह सुनिश्चित करना चाहते हैं कि पृष्ठभूमि में कोई अन्य शैली नहीं है, जैसे चित्र या ग्रेडिएंट:

background: #11ffeeaa;

मोज़िला के विनिर्देशन से ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

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

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

— AMS777
स्रोत

-2

आप RGB (63, 245, 0) में कलर कोड की तरह अस्पष्टता के साथ RGB रंग का उपयोग कर सकते हैं और opacity (जैसे 63, 245, 0, 0.5) जोड़ सकते हैं और RGB को RGBA के साथ बदल सकते हैं। Aअपारदर्शिता के लिए उपयोग किया जाना है।

div {
  background: rgba(63, 245, 0, 0.5);
}

स्निपेट का विस्तार करें

— विजय शर्मा
स्रोत