使用以下方法向图像添加线性渐变：在伪元素之后

Question

我正在制作一个类别部分，其中图片的在右上角有一个类别，左下角是标题，在底部有一个线性渐变，即标题的背景。使用伪类：在我想要将线性渐变插入背景之后。正如您所看到的那样，图像位于HTML标记中而非背景中，但即使我提供z-index也不会起作用。我做错了什么？

感谢任何建议和帮助。

提前致谢。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有一些问题

1. 使用::after代替:after。
2. img无法拥有伪元素。抱歉。
3. 伪元素应具有content: "";属性，否则根本不会出现。

在::after上使用category-details，并确保insidw .category-details中的任何其他元素都有更大的z-index（文本，即标题等），否则它将落后于::after元素。

Answer 2

您只能将伪元素添加到某些元素，如span，li，锚标记，p和h元素。尝试在包含div和样式中抛出一个span来给你一个渐变。

After样式还需要一个content: ' ';来告诉DOM后面有什么东西。

Answer 3

第一件事; CSS伪元素不适用于img元素。为什么？阅读一些关于它here。

其次;你在linear-gradient CSS函数中也犯了一点错误。在上面的代码中，您使用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设置为零并提供一些大小让它看起来不错。

考虑在项目中使用box-sizing reset以避免调整问题。

使用flexbox在这里有点棘手，因为我需要覆盖分区有一些大小（100％的可用空间），然后我需要将内容对齐到底部。这可能会让你使用内部分区进行对齐，我试图通过使用 Flexbox列来避免这种情况。

我们不应忘记此处的其他背景属性，例如background-repeat，background-size和background-position。它们将帮助您完美地定位渐变，就像您在上面的示例代码段中看到的那样。

希望这有用。干杯！

Answer 4

无法将:after伪元素添加到img元素。但是，您可以将background添加到:after上的.category-details伪元素，并使用z-index将文字放在渐变上。

另外，请不要忘记浏览器前缀。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>