मुझे एक छवि पर गैर-पारदर्शी पाठ रखना होगा। यह छवि html में परिभाषित है। (ऐसा इसलिए है कि यह गतिशील हो सकता है)। मैं एक :after छद्म तत्व के साथ पारदर्शिता को स्टाइल करता हूं। मैं इस छवि पर टेक्स्ट रखना चाहता हूं। की सराहना की

हालांकि, जिस समस्या में मैं चल रहा हूं वह यह है कि पाठ को पारदर्शिता प्राप्त होती है। मुझे मिले अन्य सभी समाधान या तो सीएसएस में चित्र को परिभाषित करते हैं या किसी चित्र का उपयोग बिल्कुल नहीं करते हैं। किसी भी मदद को सराहा जाएगा, धन्यवाद!

संपादित करें: एक रंगीन पारदर्शिता वांछित है।

<div class="col-md-6" id="red-square-parent">
  <%= image_tag 'infos/home/teaching-3.jpg' %>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>
#red-square-parent img{
  height: 100%;
  width: 100%;
  object-fit: none;
}

// Overlay
#red-square-parent:after{
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba($comp-color-red, 0.7);
}
1
frillybob 11 अक्टूबर 2019, 02:14

1 उत्तर

सबसे बढ़िया उत्तर

तो, मुद्दा यह है कि आप मूल तत्व में पारदर्शिता लागू कर रहे हैं। पारदर्शिता के लिए विशेष रूप से छवि को लक्षित करें:

JSFiddle

#red-square-parent img{
  position: relative;
  opacity: 0.5;
}

#red-square-parent div{
  position: absolute;
  bottom: 40px;
  color: black;
  font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
  <img src="http://i.imgur.com/eTmzQ.jpg"/>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>

इस छवि पर रंगीन फ़िल्टर लगाने के लिए, आप background-color नहीं लगाएंगे क्योंकि इससे छवि का रंग बिल्कुल भी नहीं बदलेगा।

इसके बजाय आपको इसे थोड़ा जटिल करने की आवश्यकता है, लेकिन आपको छवि पर filter लागू करना होगा।

मैं इस तरह के एक उपकरण का उपयोग करने की सलाह दूंगा: CSS Generator - Filter वांछित रंग प्राप्त करने के लिए प्रभाव आप चाहते हैं।

जब आपके पास वांछित filter हो, तो कुछ इस तरह दिखने के लिए अपना कोड अपडेट करें (CSS जेनरेटर - फ़िल्टर साइट। मेरी JSFiddle देखें।

#red-square-parent img{
  position: relative;
  opacity: 0.5;
  
  /* Filter  */
  filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
-webkit-filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
}

#red-square-parent div{
  position: absolute;
  bottom: 40px;
  color: black;
  font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
  <img src="http://i.imgur.com/eTmzQ.jpg"/>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>
1
EGC 11 अक्टूबर 2019, 03:33