CSS3 mask 遮罩的实际应用方式

日期:2021-03-02 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

css的mask特性容许应用者根据一部分或彻底掩藏1个元素的可见地区。这类实际效果能够根据遮罩或裁剪特殊地区的照片。

mask的简写会将 mask-border 设为原始值。应用mask的简写优于别的简写或各有特性的设定来遮盖。这能确保mask-border也会再次设定为新的实际效果款式。

mask-image

mask-image 根据载入全透明度对html元素开展遮罩,黑色意味着全透明,白色意味着不全透明,灰色为半全透明。可用于全部元素,在SVG中,它功效于包括<defs>元素和全部图型元素的器皿。

/* 照片資源 */
-webkit-mask-image: url(mask.png);

/* css的渐变色特性 */
 -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); 

/* image特性 ~ ??? */
-webkit-mask-image: image(url(mask.png), skyblue);
/* 混和特性 */
-webkit-mask-image: url('http://d.lanrentuku.com/down/png/1410/bw_halloween/bat⑶⑵56.png'), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

mask-repeat

/* 单独值 */
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默认设置值);
/* 两个值 horizontal(水平)  vertical(竖直) (下列仅为示例)*/
-webkit-mask-repeat: repeat space | repeat repeat | round space | no-repeat round;

/* Multiple values */
-webkit-mask-repeat: space round, no-repeat;
-webkit-mask-repeat: round repeat, space, repeat-x;

/* 多层遮罩  (。・_・)/~~~*/
mask-image: url('mask1.png'), url('mask2.png');
mask-repeat: repeat-x, repeat-y;

mask-clip

-webkit-mask-clip: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip;

-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* Multiple values */
-webkit-mask-clip: padding-box, no-clip;
-webkit-mask-clip: view-box, fill-box, border-box;

mask-origin

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Non-standard keyword values */ 
-webkit-mask-origin: content; 
-webkit-mask-origin: padding; 
-webkit-mask-origin: border;

mask-size

.divTest{
    padding: 40px;
    background-color: #03ff36;
    background-image: url(http://cdn01.baidu-img.cn/timg?image_search&quality=80&size=b10000_10000&sec=1470644878&di=f054ab9449175833cf84b3429acacd88&imgtype=jpg&src=http%3A%2F%2Fimg0.bdstatic.com%2Fimg%2Fimage%2Fshouye%2Fxiaoxiao%2Fis099s8ky-PC.jpg));
    -webkit-mask-image: url(http://image27.360doc.com/DownloadImg/2011/04/2015/11077777_58.png)), url(http://img.t.sinajs.cn/t6/style/images/global_nav/WB_logo.png));
    -webkit-mask-repeat: space,repeat-y;
    -webkit-mask-clip: text; 
    -webkit-mask-size: 5%, 8%;
    border: 30px solid red;
}

mask-composite (均不适用 ಥ _ ಥ )

mask-composite: add | subtract | intersect | exclude;

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。