CSS圖片加黑色遮罩的制作方法

在CSS中，我們可以使用線性漸變來制作黑色遮罩，我們需要創(chuàng)建一個與圖片大小相同的遮罩層，然后應(yīng)用線性漸變樣式，使其從透明漸變到黑色，我們將這個遮罩層放在圖片上面，使其看起來像是被黑色遮罩覆蓋。

下面是一個簡單的示例代碼：

HTML代碼：

<div class="image-mask">
  <img src="image.jpg" alt="圖片">
</div>

CSS代碼：

.image-mask {
  position: relative;
  width: 300px; /* 圖片寬度 */
  height: 200px; /* 圖片高度 */
}
.image-mask img {
  width: 100%;
  height: 100%;
}
.image-mask::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

在這個示例中，我們創(chuàng)建了一個名為.image-mask的類，用于應(yīng)用遮罩效果，我們使用::after偽元素來創(chuàng)建一個與圖片大小相同的遮罩層，并應(yīng)用線性漸變樣式，我們將這個遮罩層放在圖片上面，完成黑色遮罩的制作。