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


इसे बनाने के लिए, केवल सीएसएस का उपयोग करना संभव है 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 माता-पिता का


1998
2018-04-30 09:00


मूल


अफसोस की बात नहीं है, CSS3 नए रंग मॉड्यूल के साथ इसे ठीक करने का लक्ष्य रख रहा है, यह आपको रंग बताए जाने पर अल्फा मान निर्दिष्ट करने की अनुमति देगा। w3.org/TR/css3-color - meandmycode
दरअसल, बाल तत्वों की अस्पष्टता है गुणा किया हुआ मूल तत्व की अस्पष्टता से, ओवरराइड नहीं किया गया। तो उदाहरण के लिए यदि pअस्पष्टता थी .6 और यह spanअस्पष्टता थी .5 तो अवधि में पाठ की वास्तविक अस्पष्टता होगी 0.3। - chharvey
ऐसा लगता है, लेकिन चूंकि यह पारदर्शी पृष्ठभूमि है, इसलिए आपको फ़िल्टर / अस्पष्टता की भी आवश्यकता नहीं है: codepen.io/anon/pen/ksJug - Stijn Sanders
@chharvey अगर मैं परिभाषित करता हूं तो क्या होता है opacity:.5 माता पिता के लिए और opacity:2 बाल तत्व के लिए? - Alexander
@ एलेक्सेंडर, मुझे खुशी है कि आपने उस सवाल से पूछा था। गणितीय रूप से, किसी को संदेह होगा कि बच्चा वापस 1 की अस्पष्टता पर वापस आ जाएगा। हालांकि, opacity:2; है अमान्य सीएसएस। का मूल्य opacity संपत्ति जरूर समावेशी सीमा [0,1] के भीतर हो। - chharvey


जवाब:


या तो अर्द्ध पारदर्शी का उपयोग करें पीएनजी छवि या CSS3 का उपयोग करें:

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

यहां css3.info से एक लेख है, अस्पष्टता, आरजीबीए और समझौता (2007/06/03)।


2115
2017-07-13 20:51



हेक्स रंगों के साथ ऐसा करना संभव है? # एफएफएफ की तरह? - grm
@grm javascripter.net/faq/hextorgb.htm - kb.
@grm: डब्ल्यू 3 सी ने #RRGGBBAA हेक्स कोड प्रारूप पेश करने पर विचार किया, लेकिन उन्होंने फैसला नहीं किया (विभिन्न कारणों से), इसलिए हम नहीं कर सकते हैं। - outis
@grm के साथ एस.ए.एस.एस. आप ऐसा कर सकते हैं, background-color: rgba(#000, .5); - Jürgen Paul
@outis: अच्छी खबर, #RRGGBBAA अब रंग स्तर 4 में है। - BoltClock♦


फ़ायरफ़ॉक्स 3 और सफारी 3 में, आप आरजीबीए जैसे उपयोग कर सकते हैं जॉर्ज Schölly का उल्लेख किया

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

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>

Chrome-33 IE11 IE9 IE8


456
2018-04-30 20:42



ऐसा लगता है कि आईई 6 और आईई 7 दोनों में बहुत अच्छा काम है ... धन्यवाद! - philfreo
लेकिन आईई 8 में नहीं। मैंने नए-सेमी-फ़िल्टर सिंटैक्स की कोशिश की लेकिन यह अभी भी मेरे लिए काम नहीं करता है :( - philfreo
यह पोस्ट दिखाता है कि आईई 8 में इसे कैसे किया जाए:robertnyman.com/2010/01/11/... - Slapout
@philfreo: यदि आप सेबेस्टियन के कोड का पहला बिट "पृष्ठभूमि: आरजीबी (0, 0, 0) पारदर्शी में बदलते हैं;" अब यह आईई 8 में काम करना चाहिए। यह मुझे कुछ समय के लिए bugging था! - Tom Chantler
@AdrienBe - मैंने आपके निर्देशों के अनुसार आपका उत्तर संपादित किया। दुर्भाग्य से मैं कुछ समय के लिए इस विशेष प्रश्नोत्तर के हेडस्पेस से बाहर हूं, इसलिए मैं इस समय इस बातचीत में शामिल नहीं हो सकता। - user664833


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

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

    .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>


97
2018-05-24 16:07



उन्होंने कहा, "एक दूसरे पर स्थित दो तत्वों में पाठ और पृष्ठभूमि को अलग किए बिना।" वैसे भी धन्यवाद, यह एक अच्छा फिक्स है और उपयोगी है, लेकिन कुछ मामलों में आप अपारदर्शी तत्व अर्द्ध पारदर्शी एक बच्चे बनना चाहते हैं। - Rolf
मैंने एक और एसओ सवाल पर बहुत कुछ जवाब दिया लेकिन एक jsfiddle और स्क्रीनशॉट सबूत (आईई 7 +) जोड़ा, रुचि रखते हैं तो यहां देखें stackoverflow.com/a/21984546/759452 - Adrien Be
@Gorkem Pacaci: सुनिश्चित करें कि अस्पष्टता गुण "वास्तव में" क्रॉस-ब्राउज़र हैं, आप CSSTRICKS से इस कोड स्निपेट का उपयोग कर सकते हैं css-tricks.com/snippets/css/cross-browser-opacity - Adrien Be
एक छद्म तत्व के साथ ऐसा क्यों न करें :after और अतिरिक्त मार्कअप से बचें? - AndFisher


अर्द्ध पारदर्शी का उपयोग करना बेहतर है .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
2017-10-05 08:15



आप उपयोग कर सकते हैं paint.net भी। - Donny V.


एक साधारण अर्द्ध पारदर्शी पृष्ठभूमि रंग के लिए, उपर्युक्त समाधान (CSS3 या बीजी छवियां) सर्वोत्तम विकल्प हैं। हालांकि, कुछ fancier (उदा। एनीमेशन, एकाधिक पृष्ठभूमि, आदि) करना चाहते हैं, या यदि आप 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>

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

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

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

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

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

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

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

जैसा कि लिखा गया है, यह फ़ायरफ़ॉक्स, सफारी, क्रोम, आईई 8 +, और ओपेरा में काम करता है, हालांकि आईई 7 और आईई 6 को अतिरिक्त सीएसएस और एक्सप्रेशन, आईआईआरसी की आवश्यकता होती है, और आखिरी बार मैंने चेक किया है, दूसरा सीएसएस बदलाव ओपेरा में काम नहीं करता है।

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

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

एक पूर्ण डेमो, इस तकनीक की लचीलापन को इसके साथ उपयोग करके दिखा रहा है display: inline-block, और दोनों के साथ auto और विशिष्ट widthएस /min-heightरों:

.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>

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

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



इस स्थिति में कोई भी किस स्थिति में CSS3 का उपयोग नहीं करना चाहेंगे? - Burkely91
@ बुर्कली 9 1 अगर आप इसे CSS3 में कर सकते हैं, तो बिल्कुल इसका उपयोग करें। लेकिन CSS3 पृष्ठभूमि सभी प्रकार की सामग्री का समर्थन नहीं करती है और न ही पूर्ण लेआउट flexibilty। उपरोक्त लिफाफे / अक्षर उदाहरण को स्वतंत्र रूप से दोहराने वाले किनारों और केंद्र-भरने की वजह से CSS3 के साथ खींचना मुश्किल होगा। साथ ही, ध्यान रखें कि 5 साल पहले यह उत्तर मूल रूप से लिखा गया था, इससे पहले कि CSS3 समर्थन व्यापक था। - Slipp D. Thompson
@ इगोर इवांच ने आपके बदलावों को वापस ले लिया। मुझे खेद है, मेरे पसंदीदा फॉर्म (टैब) से इंडेंटेशन को आपके (2 रिक्त स्थान) में बदलना अच्छा नहीं है। आपके पास दिन-प्रतिदिन कोड परियोजनाओं में 2-स्पेस इंडेंटेशन का उपयोग करने का अच्छा कारण हो सकता है, लेकिन वेब पर प्रेजेंटेशन के लिए मेरा मानना ​​है कि टैब की स्पष्ट जीत है- गहन इंडेंटेशन पदानुक्रम के स्तर को समझना आसान बनाता है, और यह बहुत दूर है विश्वसनीय रूप से टैब को रिक्त स्थान में कनवर्ट करना आसान है और इसलिए सभी पाठकों का एक अधिक संगत रूप है। - Slipp D. Thompson
@ इगोर Ivancha भी, ऐसा लगता है कि आप एक ब्यूटीफायर हालांकि कोड चलाया जो हर सीएसएस चयनकर्ता और संपत्ति अपनी लाइन पर डाल दिया। मेरे उदाहरण जानबूझकर लाइन ब्रेक के साथ लिखे गए थे और तर्कसंगत समूह के टुकड़ों के लिए दूरी को पढ़ा गया था जिसे पाठक द्वारा समझा जाना चाहिए- उदा। अधिकांश width: और height: गुण एक रेखा साझा करते हैं क्योंकि वे एक ही प्रकार के निर्माण होते हैं और 2-आयामी आकार के रूप में बेहतर समझते हैं, न कि 1-आयामी बाधाओं की एक जोड़ी। इसके अलावा, कुछ पंक्तियों में उनमें से एक उचित मात्रा में पैक किया गया है क्योंकि यह दोहराई गई सामग्री है जो दिखाने के लिए महत्वपूर्ण नहीं है। - Slipp D. Thompson
@ इगोर इवांच लॉजिकल संगठन, ग्रुपिंग और स्टाइलिंग, समझने योग्य कोड लिखने के लिए अत्यंत महत्वपूर्ण है, जैसा कि यह सभी प्रकार के लेखन के साथ है। आपके द्वारा किए गए परिवर्तन किसी भी पोस्ट में जाने और सभी पैराग्राफ ब्रेक को हटाने और प्रत्येक वाक्य के बाद मजबूर न्यूलाइन डालने के बराबर थे। यदि आप अपने काम में उस बेहद पैडेंटिक बनना चाहते हैं, तो ठीक है, आप ऐसा करने के लिए स्वतंत्र हैं। लेकिन कृपया अन्य लोगों के काम में अर्थपूर्ण चरित्र और अभिव्यक्ति को कम मत करो। - Slipp D. Thompson


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

डेमो

आउटपुट:

Background opacity with a pseudo element

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

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 और बादमें।


47
2018-01-14 00:14





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

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

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

उसके अलावा,

आप इसे इस्तेमाल कर नकली कर सकते हैं two side-by-side sibling elements - बनाना एक अर्द्ध पारदर्शी, फिर absolutely position the other over the top?


23
2018-04-30 09:14



मुझे बस एक साधारण पृष्ठभूमि रंग चाहिए, पीएनजी का आकार क्या आप प्रस्तावित करेंगे कि मैं इस रंग के साथ बनाऊं? 1x1 प्रतिपादन को बहुत अधिक काम करेगा, बहुत अधिक पिक्सेल इस पीएनजी को बहुत बड़ा बनाता है (संपीड़ित होने के बाद ठीक फ़ाइल आकार होना चाहिए, लेकिन अभी भी प्रतिपादन को इसे उपयोग करने के लिए इसे असम्पीडित करने की आवश्यकता है) ... - Stijn Sanders
मैं 30px x 30px की तरह कुछ अनुशंसा करता हूं, जो 1x1 से दोहराए जाने पर कम स्मृति का उपयोग करता है, और अभी भी बैंडविड्थ उपयोग को कम करने के लिए पर्याप्त छोटा है। - Chris


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

उपयोग :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 (शून्य के मानों का उपयोग करें या जो भी आपकी आवश्यकताओं के लिए अधिक उपयुक्त है)।


20
2018-01-26 16:36





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

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

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

संपादित करें:

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


14
2017-10-25 13:55