本文目錄導(dǎo)讀：

1. 使用偽元素
2. 使用遮罩層

CSS圖片怎么加一層？

在CSS中，我們可以使用多種方法給圖片添加一層，這里我們介紹兩種常用的方法：使用偽元素和使用遮罩層。

使用偽元素

偽元素是一種非常強(qiáng)大的CSS特性，它允許我們?cè)谠氐膬?nèi)容前面或后面插入內(nèi)容，我們可以利用偽元素給圖片添加一層，下面是一個(gè)簡單的例子：

img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(image.png);
  z-index: 1;
}

在這個(gè)例子中，我們給圖片添加了一個(gè)偽元素，該偽元素覆蓋了整個(gè)圖片，并顯示了新的圖片，我們可以將image.png替換成我們想要顯示的圖片路徑。

使用遮罩層

遮罩層是一種覆蓋在圖片上面的透明層，我們可以利用它給圖片添加一層，下面是一個(gè)簡單的例子：

<div class="image-mask">
  <img src="image.png" alt="original image">
  <div class="mask"></div>
</div>

在這個(gè)例子中，我們創(chuàng)建了一個(gè)包含圖片和遮罩層的容器，我們可以使用CSS來定義遮罩層的樣式，

.image-mask {
  position: relative;
  width: 200px;
  height: 200px;
}
.image-mask img {
  width: 100%;
  height: 100%;
}
.image-mask .mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(mask.png);
}

在這個(gè)CSS樣式中，我們定義了一個(gè)遮罩層，并指定了它的位置和背景圖片，我們就可以在瀏覽器中看到添加了一層的效果了。