CSS遮罩

CSS遮罩

div元素设置了铺满整个盒子的背景图，然后设置遮罩图，由于遮罩图无法占满，就会重复排列。遮罩图透明部分看不到底部背景图，非透明部分可以看到。 底部背景如果是颜色而非图片也是同理，透明背景遮罩图变浅，而不透明部分的遮罩图颜色更深。

案例

<div class="mask"></div>
.mask {
    width: 700px;
    height: 500px;
    outline: 1px solid;
    background-image: url('./大纲.jpg');
    background-size: contain;
    -webkit-mask-image: url('./flower.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url('./flower.png');
    mask-repeat: no-repeat;
    mask-size: contain;
}

<div class="box"></div>
.box{
   width: 700px;
   height: 500px;
   background: linear-gradient(transparent 10%, red);
   -webkit-mask-image: url('./flower.png');
   mask-image: url('./flower.png');
}

大家可以试试将mask-image设置为渐变色。

相关属性

• mask-image 含义：遮罩层图片地址 值：url(),no

• mask-repeat 含义：遮罩层图片是否重复排列 值：repeat,no-repeat,repeat-x,repeat-y,round,space,unset

• mask-position 含义：遮罩层图片位置 值：bottom,center,top,left,right，或数字

• mask-size 含义：遮罩层图片大小 值：contain,cover,或数字

• mask-origin 含义：遮罩层图片相对于定位参考点 值：padding-box,border-box,content-box

• mask-clip 含义：遮罩层图片裁剪位置 值：padding-box,border-box,content-box

• mask-mode 含义：遮罩层模式 值：alpha，luminance，match-source

• mask-type 含义：同mask-mode，但是mask-type只能作用于svg元素 值：alpha，luminance，match-source

• mask-composite 含义：遮罩层图片地址有多个时的处理方式。 值：add，substract，intersect，exclude。遮罩累加，相减，相交，排除

• box-reflect 含义：设置倒影 值：第一个：above/below/left/right，第二个：倒影距离 如10px, 第三个：遮罩