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 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
html5唤起app的方法
Nov 30 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
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
教师旷工检讨书
2014/01/18 职场文书
义和团口号
2014/06/17 职场文书
超市工作总结范文2014
2014/12/19 职场文书
地震慰问信
2015/02/14 职场文书
实习生辞职信范文
2015/03/02 职场文书
高中历史教学反思
2016/02/19 职场文书
《山中访友》教学反思
2016/02/24 职场文书