CSS3如何实现图片遮罩
在CSS3中，可以使用伪元素 ::before 或 ::after 结合 background-image 属性来实现图片遮罩效果。以下是一个简单的示例：
HTML:
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Maskingtitle>
<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 伪元素在图片上添加了一个遮罩图片。遮罩图片通常是一个黑白或灰度图片，用于定义哪些部分应该显示，哪些部分应该隐藏。
你可以根据需要调整遮罩图片的透明度、位置等属性，以达到预期的效果。