CSS mask-image属性用法及代码示例

CSS中的mask-image属性用于设置图像或文本的遮罩。它用于为CSS中的特定元素形成遮罩层。

用法:

mask-image:none | <mask-source>

属性值：

none:没有设置maks层，而是设置了透明的黑色层。

用法：

mask-image:none

Example:

在此示例中，未创建任何掩码。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0" /> 
        <title>Document</title> 
    </head> 
    <style> 
        .container{ 
          background-color:green; 
          background-repeat:no-repeat; 
          width:400px; 
          height:400px; 
          display:flex; 
          align-items:center; 
          justify-content:center; 
        } 
        .mask{ 
          background:black; 
          width:200px; 
          height:200px; 
          -webkit-mask-image:none; 
        } 
        .mask h1{ 
          height:400px; 
          width:400px; 
        } 
        wrap text h1 
    </style> 
    <body> 
        <div class="container"> 
            <div class="mask"></div> 
        </div> 
    </body> 
</html>

Output:

<mask-source>：用于提供图片网址的来源。

用法:

mask-image:url();

例：

该图标是黑色背景颜色的遮罩。可以根据需要进行更改。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta name="viewport" 
              content="width=device-width,  
                       initial-scale=1.0" /> 
        <title>Document</title> 
    </head> 
    <style> 
        .container{ 
          background-color:green; 
          background-repeat:no-repeat; 
          width:400px; 
          height:400px; 
          display:flex; 
          align-items:center; 
          justify-content:center; 
        } 
        .mask{ 
          background:black; 
          width:200px; 
          height:200px; 
          -webkit-mask-image:url( 
"https://image.flaticon.com/icons/svg/942/942195.svg"); 
        } 
        .mask h1{ 
          height:400px; 
          width:400px; 
        } 
        wrap text h1 
    </style> 
    <body> 
        <div class="container"> 
            <div class="mask"></div> 
        </div> 
    </body> 
</html>

输出：

支持的浏览器：

Chrome
Edge
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 CSS mask-image Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。