圖片遮罩怎么做CSS？

在CSS中，圖片遮罩通常用于保護(hù)圖片內(nèi)容，防止圖片被隨意下載或使用，下面是一些關(guān)于如何在CSS中制作圖片遮罩的方法。

1、使用CSS的“position”屬性

在CSS中，可以使用“position”屬性來(lái)創(chuàng)建一個(gè)遮罩層，該層可以覆蓋在圖片上，并阻止用戶查看圖片內(nèi)容，可以使用以下代碼來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的圖片遮罩：

.image-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

2、使用CSS的“clip-path”屬性

CSS的“clip-path”屬性可以用于裁剪圖片，只顯示圖片的一部分，通過(guò)結(jié)合使用“position”和“clip-path”屬性，可以創(chuàng)建一個(gè)遮罩效果，其中圖片的一部分被顯示出來(lái)，而其余部分則被隱藏，可以使用以下代碼來(lái)創(chuàng)建一個(gè)圓形圖片遮罩：

.image-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.image-mask img {
  clip-path: circle(50%);
}

3、使用CSS的“filter”屬性

CSS的“filter”屬性可以用于對(duì)圖片進(jìn)行各種視覺(jué)處理，包括模糊、亮度、對(duì)比度等，通過(guò)結(jié)合使用“position”和“filter”屬性，可以創(chuàng)建一個(gè)遮罩效果，其中圖片的一部分被模糊處理，而其余部分則被正常顯示，可以使用以下代碼來(lái)創(chuàng)建一個(gè)模糊圖片遮罩：

.image-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.image-mask img {
  filter: blur(5px);
}

是三種常見(jiàn)的圖片遮罩制作方法，可以根據(jù)實(shí)際需求選擇適合的方法。