使用：after偽元素為圖像添加線性漸變

Question

我正在處理圖像所在的類別部分 在右上方有一個類別，在左下方有一個標題，在底部有一個線性漸變，即標題的背景。 使用偽類：之后，我想將線性漸變插入背景。 如您所見，圖像位於HTML標記中，而不是位於背景中，但即使我指定z-index也無法使用。 我究竟做錯了什么？

任何建議和幫助表示贊賞。

提前致謝。

 a { text-decoration: none; } .category-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; } .category-list li { flex: 0 1 31%; position: relative; } .category-details img:after { display: block; position: absolute; width: 100%; height: 103px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgb(0, 0, 0, 0.7)); z-index: 999; } .category { position: absolute; top: 10%; right: 10%; background-color: #00ae6f; color: #ffffff; padding: 0px 10px; } .category-details { position: relative; } .overlay-title { position: absolute; bottom: 10%; left: 10%; color: #fff; } .overlay-title h3 { font-size: 20px; font-weight: 700; } .overlay-title h5 { font-size: 14px; font-weight: 200; } 

 <ul class="category-list"> <li> <div class="category-details"> <img class="category-img" src="https://image.ibb.co/dWGHdG/kimberlyphoto_medium.jpg" /> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> <li> <div class="category-details"> <img class="category-img" src="https://preview.ibb.co/eEi2Cb/CBSE_Building_design_plans.jpg" /> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> <li> <div class="category-details"> <img class="category-img" src="https://image.ibb.co/dWGHdG/kimberlyphoto_medium.jpg" /> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> </ul> 

Answer 1

有幾個問題

1. 使用::after代替:after 。
2. img不能包含偽元素。 抱歉。
3. 偽元素應具有以下content: ""; 屬性，否則它將根本不會出現。

在category-details上使用::after ，並確保insidw .category-details中的任何其他元素具有更大的z索引（文本，即標題等），否則它將位於::after元素::after 。

Answer 2

您只能將偽元素添加到某些元素，例如span，li's，anchor標簽，p和h元素。 嘗試在包含的div和樣式中添加一個跨度，以為您提供漸變。

后樣式還需要一個content: ' '; 告訴DOM之后會有一些事情。

Answer 3

第一件事 CSS偽元素將不適用於img元素。 為什么？ 在這里閱讀一些有關它的信息 。

其次; 您還在linear-gradient CSS函數中犯了一個小錯誤。 在上面的代碼中，您/正在使用rgb(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4) rgb(0, 0, 0, 0.4)而不是rgba(0, 0, 0, 0.4) ，我想我不需要像rgba()那樣談論更多rgb函數不允許您使用Alpha值。

這是我對您要實現的目標的快速介紹。

 /* Used the box-sizing reset to avoid sizing issues */ *, *:after, *:before { box-sizing: border-box; } a { text-decoration: none; } /* Killed that annoying additional margin below the images */ img { vertical-align: bottom; } .category-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; } .category-list li { flex: 0 1 31%; } /* Relatively-positioned the `.overlay-title` container */ .category-list li, .category-details { position: relative; } .category { position: absolute; top: 10%; right: 10%; background-color: #00ae6f; color: #ffffff; padding: 0px 10px; } .category-details { position: relative; color: #fff; } /* Made the appropriate positioning, display, and background changes to the overlay div. This will do the job. */ .overlay-title { position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); background-size: 100% 50%; background-position: 0 100%; background-repeat: no-repeat; z-index: 999; } .overlay-title h3 { font-size: 20px; font-weight: 700; } .overlay-title h5 { font-size: 14px; font-weight: 200; } /* Gave some margin to make the overlay text look good */ .overlay-title h3, .overlay-title h5 { margin: 0 0 1em; } 

 <ul class="category-list"> <li> <div class="category-details"> <img class="category-img" src="https://image.ibb.co/dWGHdG/kimberlyphoto_medium.jpg" /> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> <li> <div class="category-details"> <img class="category-img" src="https://preview.ibb.co/eEi2Cb/CBSE_Building_design_plans.jpg" /> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> <li> <div class="category-details"> <img class="category-img" src="https://image.ibb.co/dWGHdG/kimberlyphoto_medium.jpg" /> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> </ul> 

在上面的示例中，我沒有使用偽元素，而是將漸變應用於了疊加划分，並進行了一些其他設置，例如將left和bottom設置為零，並提供了一些尺寸使其看起來不錯。

考慮在項目中使用按大小調整的重置以避免大小問題。

在這里使用flexbox有點棘手，因為我需要覆蓋部分具有一定的大小（可用空間的100％），然后需要將內容與底部對齊。 這可能會使您為了對齊目的而使用內部分隔，而我嘗試通過使用Flexbox columns來避免這種情況 。

我們在這里不應忘記其他背景屬性，例如background-repeat ， background-size和background-position 。 如您在上面的示例片段中已經看到的那樣，它們將幫助您完美地放置漸變。

希望這會有所幫助。 干杯!

Answer 4

無法將:after psuedo-element添加到img元素中。 但是您可以將background添加到.category-details上的:after .category-details element上，並使用z-index將文本放置在漸變上。

另外，請不要忘記瀏覽器前綴。

 a { text-decoration: none; } .category-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; } .category-list li { flex: 0 1 31%; position: relative; } .category { position: absolute; z-index: 1000; top: 10%; right: 10%; background-color: #00ae6f; color: #ffffff; padding: 0px 10px; } .category-details { position: relative; } .category-details:after { content: ""; z-index: 100; position: absolute; border-radius: 16px; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)); } .overlay-title { position: absolute; z-index: 1000; bottom: 10%; left: 10%; color: #fff; } .overlay-title h3 { font-size: 20px; font-weight: 700; } .overlay-title h5 { font-size: 14px; font-weight: 200; } 

 <ul class="category-list"> <li> <div class="category-details"> <img class="category-img" src="https://image.ibb.co/dWGHdG/kimberlyphoto_medium.jpg" /> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> </ul> 

Answer 5

您可以通過在圖像旁邊添加div或span來完全獲得所需的內容，如下所示。 我在圖像旁邊添加了<div class="bottom-gradient"></div> 。

 a { text-decoration: none; } .category-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; } .category-list li { flex: 0 1 31%; position: relative; } .category-details img:after { display: block; position: absolute; width: 100%; height: 103px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgb(0, 0, 0, 0.7)); z-index: 999; } .category { position: absolute; top: 10%; right: 10%; background-color: #00ae6f; color: #ffffff; padding: 0px 10px; } .category-details { position: relative; } .overlay-title { position: absolute; bottom: 10%; left: 10%; color: #fff; } .overlay-title h3 { font-size: 20px; font-weight: 700; } .overlay-title h5 { font-size: 14px; font-weight: 200; } .bottom-gradient { background: rgba(0, 0, 0, 0) linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 23%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0; bottom: 0; left: 0; position: absolute; right: 0; top: 0; } 

 <ul class="category-list"> <li> <div class="category-details"> <img class="category-img" src="https://image.ibb.co/dWGHdG/kimberlyphoto_medium.jpg" /> <div class="bottom-gradient"></div> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> <li> <div class="category-details"> <img class="category-img" src="https://preview.ibb.co/eEi2Cb/CBSE_Building_design_plans.jpg" /> <div class="bottom-gradient"></div> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> <li> <div class="category-details"> <img class="category-img" src="https://image.ibb.co/dWGHdG/kimberlyphoto_medium.jpg" /> <div class="bottom-gradient"></div> <a href="#" class="category">Education</a> <div class="overlay-title"> <h3>Elementary school</h3> <h5>297 stephens st. pressville</h5> </div> </div> </li> </ul>