CSS masking

2025年3月26日 | 阅读 2 分钟

CSS 中的 mask 属性用于通过在特定点进行剪切或蒙版图像来隐藏元素。蒙版定义了如何将图像或图形元素用作亮度或 Alpha 蒙版。它是一种图形操作，可以完全或部分隐藏元素或对象的部分。

通过蒙版，可以以不同的不透明度级别显示或隐藏图像的各个部分。在 CSS 中，蒙版是通过使用 mask-image 属性实现的，我们必须提供一个图像作为蒙版。

让我们通过一些插图来理解这一点。

示例

在这个示例中，我们在图像元素上放置了一个蒙版。这里有两个特定的图像，我们正在对它们应用蒙版，最终图像是通过将所有蒙版图像组合在一起、拉伸它们等方式构建的。

<!DOCTYPE html>
<html>
<head>
<style>
div img{
width: 200px;
height: 200px;
}
#masked{
width: 300px;
height: 300px;
-webkit-mask-box-image: url(box.png) 25;

}
</style>
</head>

<body>
<center>
<div id = "one">
<h2> Original Images </h2>
<img src = "forest.jpg">
<img src = "box.png">
</div>
<h2> After masking </h2>
<img src = "forest.jpg" id = "masked">
</center>
</body>
</html>

输出

还有一个例子，其中我们也使用了图像进行蒙版。我们使用了两张图像，其中一张是包含条纹的蒙版图像。

示例 2

这是在图像元素上放置蒙版的另一个示例。

<!DOCTYPE html>
<html>
<head>
<style>
div img{
width: 200px;
height: 200px;
}
#masked{
width: 300px;
height: 300px;
-webkit-mask-box-image: url(stripes.png);
background-color: black;

}
</style>
</head>

<body>
<center>
<div id = "one">
<h2> Original Images </h2>
<img src = "forest.jpg">
<img src = "stripes.png">
</div>
<h2> After masking </h2>
<img src = "forest.jpg" id = "masked">
</center>
</body>
</html>

输出

Example3

我们可以使用 CSS 渐变作为蒙版图像的来源。

<!DOCTYPE html>
<html>
<head>
<style>
#masked{
width: 300px;
height: 300px;
-webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.9)));
border: 9px ridge red;
}
</style>
</head>

<body>
<center>
<img src = "forest.jpg" id = "masked">
</center>
</body>
</html>

输出

Example4

<!DOCTYPE html>
<html>
<head>
<style>
#masked{
width: 300px;
height: 300px;
border-radius: 0px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, blue 40%, rgba(0,0,0,0.3) 70%);
border: 9px ridge red;
}
</style>
</head>

<body>
<center>
<img src = "forest.jpg" id = "masked">
</center>
</body>
</html>

输出

Example4

<!DOCTYPE html>
<html>
<head>
<style>
#circle{
width: 300px;
height: 300px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, blue 40%, rgba(0,0,0,0.3) 70%);
border: 9px ridge red;
}
#ellipse{
width: 300px;
height: 300px;
-webkit-mask-image: radial-gradient(ellipse 80% 30% at 50% 50%, blue 40%, rgba(0,0,0,0.3) 55%);
border: 9px ridge red;
}
</style>
</head>

<body>
<center>
<img src = "forest.jpg" id = "circle">
<img src = "forest.jpg" id = "ellipse">
</center>
</body>
</html>

输出

下一主题CSS 过渡

CSS masking

示例

示例 2

Example3

Example4

Example4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS masking

示例

示例 2

Example3

Example4

Example4

相关帖子

CSS pseudo-classes

CSS 3D Transforms

flex-flow property

CSS Pseudo-elements

CSS Arrow

CSS Aural Media

flex-shrink property

CSS Combinators

flex-grow property

CSS z-index

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器