css - केवल पृष्ठभूमि रंग के लिए सीएसएस अस्पष्टता उस पर पाठ नहीं है?




opacity (8)

क्या मैं केवल एक div की background संपत्ति में opacity संपत्ति असाइन कर सकता हूं, न कि उस पर पाठ के लिए?

मैंने कोशिश की:

background: #CCC;
opacity: 0.6;

लेकिन यह अस्पष्टता नहीं बदलता है।


आप नहीं कर सकते आपके पास एक अलग div होना चाहिए जो कि पृष्ठभूमि है, ताकि आप केवल उस पर अस्पष्टता लागू कर सकें।

मैंने हाल ही में ऐसा करने की कोशिश की, और चूंकि मैं पहले से ही jQuery का उपयोग कर रहा था, इसलिए मुझे निम्नलिखित कम से कम परेशानी मिली:

  1. दो अलग divs बनाएँ। वे भाई बहन होंगे, एक-दूसरे या किसी भी चीज़ में निहित नहीं होंगे।
  2. text div को एक ठोस पृष्ठभूमि रंग दें, क्योंकि यह जेएस-कम डिफ़ॉल्ट होगा।
  3. text div की ऊंचाई प्राप्त करने के लिए jQuery का उपयोग करें, और इसे background div पर लागू करें।

मुझे यकीन है कि कुछ ही सीएसएस निंजा तरीका है जो इसे केवल फ्लोट या कुछ के साथ करने के लिए करता है, लेकिन मेरे पास इसे समझने का धैर्य नहीं था।


इस धागे में आने वाले किसी भी व्यक्ति के लिए, यहां एक स्क्रिप्ट है जिसे notYoChild.js कहा जाता है जिसे मैंने अभी लिखा है जो इस समस्या को स्वचालित रूप से हल करता है:

http://www.impressivewebs.com/fixing-parent-child-opacity/

असल में, यह बच्चों को मूल तत्व से अलग करता है, लेकिन तत्व को पृष्ठ पर उसी भौतिक स्थान में रखता है।


ऐसा करने का एक शानदार तरीका वास्तव में सीएसएस 3 का उपयोग करना होगा।

एक वर्ग चौड़ाई एक कक्षा बनाएँ - उदाहरण के लिए अपने पृष्ठ के शीर्ष पर सुपरसइज़र:

फिर निम्नलिखित सीएसएस-गुण सेट करें:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }
<div class="supersizer"></div>


ऐसा करने का सबसे आसान तरीका 2 divs, पृष्ठभूमि के साथ 1 और पाठ के साथ 1 है:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>


मुझे भी यही समस्या थी। मुझे 100% पारदर्शी पृष्ठभूमि रंग चाहिए, बस इस कोड का उपयोग करें, यह मेरे लिए बहुत अच्छा काम करता है:

rgba(54, 25, 25, .00004);

आप इस वेब पेज पर बाईं तरफ के उदाहरण देख सकते हैं (संपर्क फ़ॉर्म क्षेत्र)


मेरी चाल रंग के साथ एक पारदर्शी .png बनाने और background:url() उपयोग करने के लिए background:url()


सबसे आसान समाधान 3 divs बनाना है। एक जिसमें दूसरा 2 होगा, एक पारदर्शी पृष्ठभूमि वाला और सामग्री वाला एक होगा। पहले div की स्थिति को सापेक्ष बनाएं और पारदर्शी पृष्ठभूमि के साथ नकारात्मक z-index , फिर पारदर्शी पृष्ठभूमि पर फिट करने के लिए सामग्री की स्थिति समायोजित करें। इस तरह आपको पूर्ण स्थिति के साथ कोई समस्या नहीं होगी।


केवल कम उपयोगकर्ताओं के लिए:

यदि आप आरजीबीए का उपयोग करके अपने रंग सेट करना पसंद नहीं करते हैं, बल्कि हेक्स का उपयोग करते हैं, तो समाधान हैं।

आप एक मिश्रण का उपयोग कर सकते हैं जैसे:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

और इसका इस्तेमाल करें

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

असल में यह एक अंतर्निहित कम समारोह भी प्रदान करता है:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

कम संकलक के साथ HEX रंग को rgba में कैसे परिवर्तित करें देखें ?







opacity