CSS mask

2021-03-02 05:12 jianzhan

CSS mask遮罩特性的历史时间十分悠久了，远到比CSS3 border-radius等特性还要悠久，最开始是出現在Safari访问器上的，类似能够追溯到09年。

但是那个情况下，遮罩只能做为试验性的特性，做1些殊效应用。终究那个时代還是IE访问器的时期，特性虽好，但使用价值比较有限。

可是现如今状况却大有转变，除IE和Edge访问器不适用，Firefox，Chrome和挪动端等都早已全线适用，实际上际运用使用价值已不能一概而论。特别Firefox访问器，从版本号55刚开始，早已全面适用了CSS3 mask特性。而且mask特性标准早已进到候选强烈推荐标准之列，会说之后进到既定标准规范早已是毋庸置疑的的事儿，大伙儿能够安心学习培训，未来必有效处。

在以往，CSS mask特性在应用的情况下便是mask: xxx，可是如今伴随着这个特性的标准化，mask特性具体上早已变成了众多mask-*的缩写，这和background, border特性是1样的。

实际是哪些特性的缩写呢，能够参照下面的目录：

mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite

下面大家先来详细介绍 mask-image 特性的用法。

mask-image指遮罩应用的照片資源，默认设置值是none，也便是无遮罩照片。因而，和border特性中的border-style特性相近，是1个要想合理果就务必设置的特性值。

mask-image遮罩所适用的照片种类十分的普遍，能够是url()静态数据照片資源，文件格式包含JPG，PNG和SVG等全是适用的；还可以是动态性转化成的照片，比如应用各种各样CSS3渐变色绘图的照片。英语的语法上适用CSS3各类渐变色，和url()作用符，image()作用符，乃至element()作用符。另外还适用多情况，因而基础理论上，应用mask-image大家能够遮罩担任意大家要想的图型，十分强劲。

眼见为实，大家根据很多实例来展现mask-image的强劲的地方。

最先，下面全部实例应用初始图以下：

大家先来1个最基本的png照片遮罩展现。

CSS编码以下：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(loading.png);
    mask-image: url(loading.png);
}

HTML编码以下：

<img src="ps1.jpg" class="mask-image">

最终的实际效果，以下图所示：

从上面这个最基础的实例，大家能够看出，所谓遮罩，便是初始照片只显示信息遮罩照片非全透明的一部分。比如本实例中，loading圆环有色调一部分便是外面1圈圆环，因而最后大家看到实际效果是初始照片，只露出了1个1个的圈圈环。而且半全透明地区也精确遮罩显示信息了。

因而，大家非常少应用jpg照片来做为遮罩照片的，由于jpg照片1定是彻底不全透明的，最后的实际效果便是原图甚么也看不见。

此外，假如loading.png载入不成功，则Firefox，Chrome访问器下立即初始图无法显示。

接着大家再看来1个SVG图型遮罩实际效果展现。

css编码以下：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(star.svg);
    mask-image: url(star.svg);
}

html编码以下：

<img src="ps1.jpg" class="mask-image">

最后的实际效果和上图类似。

上面是将svg做为情况图来完成的，如今大家再应用SVG图型中<mask>元素做为遮罩元向来完成它。

CSS 编码以下：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(#mask);
    mask-image: url(#mask);
    /* Firefox外链也适用 */
    /* mask-image: url(ellipse-rect.svg#mask); */
}

html编码以下：

<svg>
    <defs>   
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <!-- 柔化边沿 -->
            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
            <!-- 行为主体遮罩 www.xttblog.com -->
            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
        </mask>
    </defs>   
</svg>
<img src="ps1.jpg" class="mask-image">

再应用SVG元素内联SVG的<mask>，看下面的完成。

CSS 编码：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(#mask);
    mask: url(#mask);
    mask-image: url(#mask);
    /* Firefox外链也适用 */
    /* mask-image: url(ellipse-rect.svg#mask); */
}

SVG完成的编码：

<svg>
    <defs>   
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <!-- 柔化边沿 www.xttblog.com-->
            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
            <!-- 行为主体遮罩 -->
            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
        </mask>
    </defs>   
</svg>
<svg width="250" height="186">
    <image xlink:href="ps1.jpg" class="mask-image" width="250" height="186"></image>
</svg>

不管是clip-path還是这里的mask，外链SVG特点的适用1定是比内联SVG弱的。既然Chrome访问器连一般HTML的内联SVG的<mask>都不适用，当然毫无疑问不适用这里的外链SVG文档<mask>元素的遮罩适用。

那以前主要表现优良的Firefox访问器呢？

较为好运，Firefox访问器近期适用了随意元素外链SVG文档的<mask>，为何说近期呢？我看了下我如今的Firefox，显示信息全新版，版本号是56，随后Firefox适用随意元素可使用外链SVG <mask>元素做为遮罩是版本号55刚开始了。

至于上面的，随意元素内联SVG <mask>的适用，Firefox很早就早已适用。

坚信没多久的版本号，Chrome访问器也会对其开展适用的，能够细心等候。

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

CSS mask

为您推荐