CSS 掩码大小属性

原文:https://www.geeksforgeeks.org/css-mask-size-property/

CSS 蒙版大小属性设置蒙版绘画区域上蒙版图像的大小。

语法:

mask-size: Keyword values
/* Or */
mask-size: One-values
/* Or */
mask-size: Two-values
/* Or */
mask-size: Multiple-values
/* Or */
mask-size: Global values

属性值:该属性接受上面提到的和下面描述的值:

  • 关键字值:该属性值是指用覆盖、包含等单位定义的值。
  • 单值:该属性值是指用 %、em、px 等等单位定义的值。高度设置为自动。它的基本语法是蒙版大小:图像的宽度；
  • 双值:该属性值是指用% em、px 等单位定义的值。高度设置为自动。其基本语法是蒙版大小:图像的宽度图像的高度；
  • 多个值:该属性值是指用 %、px、em、auto、等单位定义的值。
  • 全局值:该属性值是指用继承、初始、取消设置、等单位定义的值。

示例 1: 以下示例使用单值说明了遮罩大小属性

<!DOCTYPE html>
<html>

    <head>
        <style>
            .Container{
                width:25%;
                height:200px;
                box-sizing:border-box;
                border:1px solid green;    
            }
            .geeks{
                width: 60%;
                height:200px;
                background: green;
                -webkit-mask-image: 
                url("image.svg");
                -webkit-mask-repeat:no-repeat;
                mask-size: cover;            
            }

        </style>
    </head>
<body>

    <div class="Container">
        <div class="geeks"></div>
    </div>

</body>

</html>

输出:

示例 2: 以下示例使用双值说明了遮罩大小属性

<!DOCTYPE html>
<html>

    <head>
        <style>
            .Container{
                width:25%;
                height:200px;
                box-sizing:border-box;
                border:1px solid green;    
            }
            .geeks{
                width: 60%;
                height:200px;
                background: green;
                -webkit-mask-image: 
                url("image.svg");
                -webkit-mask-repeat:no-repeat;
                mask-size: 40% 80%;            
            }

        </style>
    </head>
<body>

    <div class="Container">
        <div class="geeks"></div>
    </div>

</body>

</html>

输出:

支持的浏览器:

  • 铬
  • 火狐浏览器
  • 旅行队
  • 歌剧
  • 边缘
  • 互联网浏览器(不支持)

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/7303.html