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样的。

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

  1. mask-image
  2. mask-mode
  3. mask-repeat
  4. mask-position
  5. mask-clip
  6. mask-origin
  7. mask-size
  8. mask-type
  9. 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访问器也会对其开展适用的,能够细心等候。

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