使用 z-index 未突出顯示背景圖像上的文本

Question

我正在嘗試在明亮的背景圖像上創建一個暗層。 以便文本正確顯示。

下面是片段：

 .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無法正常工作，並且文本的不透明度也隨着圖像而降低。

請幫助我如何提高“鏈接內容”類中文本的可見性

Answer 1

首先，給類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>

如果這不是您要找的，請告訴我。

Answer 2

用內聯元素包圍塊元素是錯誤的格式。 這就是@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>