CSS3如何实现图片遮罩

发布时间：2025-05-04 13:04:45 作者：小樊
来源：亿速云阅读：108

在CSS3中，可以使用伪元素 ::before 或 ::after 结合 background-image 属性来实现图片遮罩效果。以下是一个简单的示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Masking</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div class="image-mask">
       <img src="your-image.jpg" alt="Your Image">
   </div>
</body>
</html>

CSS (styles.css):

.image-mask {
  position: relative;
  display: inline-block;
}

.image-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('mask-image.png'); /* 遮罩图片，通常是黑白或灰度图片 */
  background-size: cover;
  background-position: center;
  opacity: 0.5; /* 遮罩透明度，可以根据需要调整 */
  pointer-events: none; /* 使遮罩不会影响鼠标事件 */
}

.image-mask img {
  display: block;
  max-width: 100%;
  height: auto;
}

在这个示例中，我们创建了一个名为 .image-mask 的容器，它包含一个图片元素。然后，我们使用 ::before 伪元素在图片上添加了一个遮罩图片。遮罩图片通常是一个黑白或灰度图片，用于定义哪些部分应该显示，哪些部分应该隐藏。

你可以根据需要调整遮罩图片的透明度、位置等属性，以达到预期的效果。

CSS3如何实现图片遮罩

相关阅读