CSS圖片遮罩層是一種在圖片上添加半透明覆蓋層的技術(shù)，通常用于增強(qiáng)圖片的視覺(jué)效果或保護(hù)圖片內(nèi)容，下面是一些關(guān)于CSS圖片遮罩層的制作方法和技巧。

1、使用CSS的rgba函數(shù)設(shè)置背景色

rgba函數(shù)允許你設(shè)置一個(gè)顏色的透明度，這對(duì)于創(chuàng)建遮罩層非常有用，你可以使用以下CSS代碼在圖片上添加一個(gè)半透明的黑色遮罩層：

.image-mask {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
}
.image-mask:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

2、使用::before和::after偽元素創(chuàng)建遮罩層

::before和::after偽元素可以用來(lái)在圖片周圍添加裝飾或遮罩，你可以使用以下CSS代碼在圖片周圍添加一圈半透明的白色遮罩：

.image-mask {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
}
.image-mask::before, .image-mask::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 320px;
  height: 220px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.5);
}

3、使用mask-image屬性創(chuàng)建遮罩層

mask-image屬性可以用來(lái)在圖片上添加遮罩圖案，你可以使用以下CSS代碼在圖片上添加一個(gè)簡(jiǎn)單的白色遮罩圖案：

.image-mask {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
}
.image-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url('mask.png'); /* 使用一個(gè)包含遮罩圖案的圖片 */
}

這種方法可以使用任何支持圖像格式的圖片作為遮罩圖案。