css遮罩层原理_css模糊遮罩效果[通俗易懂]

css遮罩层原理_css模糊遮罩效果[通俗易懂]在网页中看到这种图:第一反应是把这个图片切片,做成png

在网页中看到这种图:

css遮罩层原理_css模糊遮罩效果[通俗易懂]

第一反应是把这个图片切片,做成png。

没毛病~!但是,如果要更换图中的妹子,岂不是又要切一次图??麻烦。

今天居然看到 CSS3 的一个新增样式 mask (遮罩),可以简单实现上图效果,而且可以保证内容图片完整,直接更换不用切片。

开始~

一、准备工作

准备内容图片,和遮罩png图。不出意外的话,建议内容图片和遮罩png图大小一样(当然也可以不一样,具体根据需要来定。)

PNG图:400*400,名:m1.png

css遮罩层原理_css模糊遮罩效果[通俗易懂]

内容图:400*400

css遮罩层原理_css模糊遮罩效果[通俗易懂]

二、HTML结构和基本CSS样式

<div class="mask">
    <img src="images/3d/11.jpg" alt="">
</div>
.mask{
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 400px;
}

三、添加 mask

.mask{ 
    ...省略其他样式...
    mask: url("images/m1.png") center center/400px 400px no-repeat ;
    -webkit-mask:url("images/m1.png") center center/400px 400px no-repeat ; 
}

解释:设置mask遮罩图片的地址,位置 / 大小,是否重复。

css遮罩层原理_css模糊遮罩效果[通俗易懂]

四、给mask添加过渡动画

.mask{
    ...省略其他样式...
    transition:all 0.5s;
}
.mask:hover{
    mask: url("images/m1.png") center center/400px 400px   no-repeat ;
    -webkit-mask:url("images/m1.png") center center/420px 420px no-repeat ;
}

当鼠标放到 div.mask 上的时候,mask部分会放大。

五、小结

  1. 作为遮罩mask的图片,不论颜色,只看透明区域和不透明区域
  2. mask能盖住的部分除了图片,文字之类的内容都可以。
  3. 目前 mask 样式还未最终形参标准,chrome 派系浏览器还必须添加 浏览器前缀 -webkit-。不过 firefox 从 53 版本开始已经全面支持 mask。

mask 的浏览器支持情况如下:图来自 caniuse.com

css遮罩层原理_css模糊遮罩效果[通俗易懂]

     3. 如果 mask 图片有半透明的部分,那么展示的内容效果也是半透明的。

换一个半透明的png图,作为 mask 的效果:

css遮罩层原理_css模糊遮罩效果[通俗易懂]

拓展1:SVG 中的 mask

SVG 也有 mask 效果。

<div class="mask">
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <mask id="svgmask" x="0" y="0" width="100%" height="100%">
                <rect x="0" y="0" width="100%" height="100%" fill="#000" ></rect>
                <!-- 遮罩内容 -->
                <text x="200" y="110" fill="#fff">
                  I love you
                    我爱你
                </text>
                <circle cx="200" cy="200" r="100"
                        stroke-width="0" fill="#fff"></circle>
                <!-- 遮罩内容 end -->
            </mask>
        </defs>
        <!-- 图片内容 -->
        <image href="images/1.jpg" x="0" y="0" width="400" height="400"
               mask="url(#svgmask)"></image>
        <!-- 图片内容 end -->
    </svg>
</div>

 

css遮罩层原理_css模糊遮罩效果[通俗易懂]

注意:

1. SVG 遮罩中,白色可见,黑色不可见,其他颜色根据颜色的深浅呈现不同的半透明效果。

2. 在应用 mask 的内容上要添加 mask 属性。

拓展2:结合SVG和mask样式的遮罩

HTML:

<div class="mask">
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <mask id="svgmask" x="0" y="0" width="100%" height="100%">
                <rect x="0" y="0" width="100%" height="100%" fill="#fff" ></rect>
                <!-- 遮罩内容 -->
                <text x="200" y="100" fill="#000">
                  I love you
                    我爱你
                </text>
                <circle cx="200" cy="200" r="100"
                        stroke-width="0" fill="#000"></circle>
                <!-- 遮罩内容 end -->
            </mask>
        </defs>
        <rect x="0" y="0" width="100%" height="100%"
              fill="#fff" ></rect>
    </svg>
    <!-- 内容可以是图片,视频等 -->
    <img src="images/1.jpg" width="400" height="400" alt="">
</div>

CSS:

*{
    margin: 0;
    padding: 0;
}
.mask{
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 400px;
    position: relative;
}
.mask svg{
    position: absolute;
    top: 0;
    right: 0;
}

.mask svg text{
    text-anchor: middle;
    font-size: 50px;
}
.mask > svg > rect{
    -webkit-mask: url(#svgmask);
    mask: url(#svgmask);
}

css遮罩层原理_css模糊遮罩效果[通俗易懂]

mask 应用示例:一些不规则的图像展示

css遮罩层原理_css模糊遮罩效果[通俗易懂]

css遮罩层原理_css模糊遮罩效果[通俗易懂]

css遮罩层原理_css模糊遮罩效果[通俗易懂]

css遮罩层原理_css模糊遮罩效果[通俗易懂]

当然,更多 mask 的有趣应用,等着我们去开发~!

 

今天的文章css遮罩层原理_css模糊遮罩效果[通俗易懂]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/86515.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注