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

नीचे स्निपेट है:

.link {
  position: relative;
  z-index: 1;
}

.link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
<div id="contents" class="bg-light">
  <a href="#" id="movies" class="link">
    <div class="link-content">
      <h3>My <strong class="text-primary">Movie</strong> Collection</h3>
      <p><strong class="text-secondary">Click Here</strong> to discover the movie collections</p>
    </div>
  </a>
  <a href="#" id="anime" class="link">
    <div class="link-content">
      <h3>My <span class="text-primary">Anime</span> Collection</h3>
      <p>Check out our anime collections rated and recommended by other viewers. <span class="text-secondary">Click Here</span></p>
    </div>
  </a>
  <a href="#" id="ws" class="link">
    <div class="link-content">
      <h3>My <strong class="text-supplementary">Web-Series</strong> Collection</h3>
      <p><span class="text-secondary">Click Here</span> Check out our Web-Series collections rated and recommended by other viewers.</p>
    </div>
  </a>
</div>

लेकिन z-index ठीक से काम नहीं कर रहा है, और छवि के साथ टेक्स्ट की अस्पष्टता भी कम हो जाती है।

कृपया मदद करें कि मैं "लिंक-सामग्री" वर्ग के अंदर पाठ की दृश्यता कैसे बढ़ा सकता हूं

1
Soumen 4 अक्टूबर 2020, 12:48

2 जवाब

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

सबसे पहले, कक्षा link को किसी प्रकार का प्रदर्शन दें, उदाहरण के लिए: display: block;

फिर छद्म वर्ग ::before पर जाएं और इसे एक z-index: -1 दें।

जो इसे काम करने के लिए मिलेगा और बैक में बैकग्राउंड और फ्रंट में टेक्स्ट बना देगा।

.link {
  position: relative;
  display: block;
  z-index: 1;
}

.link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
<div id="contents" class="bg-light">
  <a href="#" id="movies" class="link">
    <div class="link-content">
      <h3>My <strong class="text-primary">Movie</strong> Collection</h3>
      <p><strong class="text-secondary">Click Here</strong> to discover the movie collections</p>
    </div>
  </a>
  <a href="#" id="anime" class="link">
    <div class="link-content">
      <h3>My <span class="text-primary">Anime</span> Collection</h3>
      <p>Check out our anime collections rated and recommended by other viewers. <span class="text-secondary">Click Here</span></p>
    </div>
  </a>
  <a href="#" id="ws" class="link">
    <div class="link-content">
      <h3>My <strong class="text-supplementary">Web-Series</strong> Collection</h3>
      <p><span class="text-secondary">Click Here</span> Check out our Web-Series collections rated and recommended by other viewers.</p>
    </div>
  </a>
</div>

अगर वह नहीं है जिसे आप ढूंढ रहे हैं तो मुझे बताएं।

2
Ahmad Dalao 4 अक्टूबर 2020, 13:02

इनलाइन तत्वों के साथ ब्लॉक तत्व को घेरना दोषपूर्ण स्वरूपण है। इसलिए @Ahmad Dalao का समाधान display: block को <a> टैग में जोड़कर काम करता है।

मुझे समझ नहीं आ रहा है। आप केवल .link-content को पृष्ठभूमि-रंग क्यों नहीं दे सकते? आप कहते हैं "... एक उज्ज्वल पृष्ठभूमि छवि पर" लेकिन मुझे इसके लिए कोई कोड नहीं दिख रहा है।

.link-content {
  background-color: rgba(0, 0, 0, 0.5);
}
<div id="contents" class="bg-light">
  <a href="#" id="movies" class="link">
    <div class="link-content">
      <h3>My <strong class="text-primary">Movie</strong> Collection</h3>
      <p><strong class="text-secondary">Click Here</strong> to discover the movie collections</p>
    </div>
  </a>
  <a href="#" id="anime" class="link">
    <div class="link-content">
      <h3>My <span class="text-primary">Anime</span> Collection</h3>
      <p>Check out our anime collections rated and recommended by other viewers. <span class="text-secondary">Click Here</span></p>
    </div>
  </a>
  <a href="#" id="ws" class="link">
    <div class="link-content">
      <h3>My <strong class="text-supplementary">Web-Series</strong> Collection</h3>
      <p><span class="text-secondary">Click Here</span> Check out our Web-Series collections rated and recommended by other viewers.</p>
    </div>
  </a>
</div>
0
Rickard Elimää 4 अक्टूबर 2020, 13:09