css3遮罩层镂空效果的多种实现方法


Posted in HTML / CSS onMay 11, 2020

本文介绍了的4种实现遮罩层镂空的方法,分享给大家,也给自己留个笔记,具体如下:

先看看效果

css3遮罩层镂空效果的多种实现方法

【 方法一:截图模拟实现 】

原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上。

优点:原理简单;兼容性好,可以兼容到IE6、IE7;可以同时实现镂空多个。

缺点:此方法只适合静止页面,不适合可以滚动的页面。也不适合页面内容会发生变换的页面。

代码如下:

<div class="class1">
    <img src="images/000.jpg" alt=""/>
</div>

.class1{
    position: absolute;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.6;
    filter:alpha(opacity=60);
}
.class1 img{
    position: absolute;
    top:260px;
    left: 208px;
}

【 方法二:CSS3阴影属性实现 】

原理:利用CSS3的阴影属性。

优点:实现方便;适合任何页面,不会受页面的限制。

缺点:兼容不太好,只能兼容到IE9。

代码如下:

<div class="class2"></div>

.class2{
    position: absolute;
    width:170px;
    height:190px;
    top: 260px;
    left: 208px;
    box-shadow: rgba(0,0,0,.6) 0  0  0  100vh;
}

【方法三:CSS边框属性实现 】

原理:利用边框属性。先将一个空盒子定位在目标区域,然后在其四周用边框填充。

优点:实现方便,兼容性好,可以兼容到IE6、IE7;适合任何页面,不会受页面的限制。

缺点:要做兼容实现过程则相对复杂。

代码如下:

<div class="class3"></div>
.class3{
      position: absolute;
      width:170px;
      height:190px;
      top: 0;
      left: 0;
      border-left-width:208px;
      border-left-style: solid;
      border-left-color:rgba(0,0,0,.6);
      border-right-width:970px;
      border-right-style: solid;
      border-right-color:rgba(0,0,0,.6);
      border-top-width:260px;
      border-top-style: solid;
      border-top-color:rgba(0,0,0,.6);
      border-bottom-width:253px;
      border-bottom-style: solid;
      border-bottom-color:rgba(0,0,0,.6);
}

【 方法四:SVG或者canvas 】

原理:利用SVG或者canvas的绘图功能。

优点:可以同时镂空多个。

缺点:兼容性不好,实现过程相对复杂。

我以SVG为例,代码如下:

<svg style="position: absolute;" width="1366" height="700">
    <defs>
        <mask id="myMask">
            <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
            <rect id="circle1" width="170" height="190" x='208' y="260" style="fill: #000" />
        </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: rgba(0, 0, 0, 0.6); mask: url(#myMask)"></rect>
</svg>

到此这篇关于css3遮罩层镂空效果的多种实现方法的文章就介绍到这了,更多相关css3遮罩层镂空内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
css3的focus-within选择器的使用
May 11 #HTML / CSS
CSS3实现渐变背景兼容问题
May 06 #HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 #HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 #HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 #HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 #HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 #HTML / CSS
You might like
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php实现的xml操作类
2016/01/15 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
Javascript Global对象
2009/08/13 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
jquery实现动态画圆
2014/12/04 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Djang中静态文件配置方法
2015/07/30 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Python如何使用input函数获取输入
2020/08/06 Python
社区学雷锋活动策划方案
2014/01/30 职场文书
学校教学管理制度
2015/08/06 职场文书