Html 点透镂空遮罩,CSS实现镂空遮罩
前一阵子面试被问题到这个问题,突然懵逼了,脑子一片空白,以前知道这种效果,比如什么值得买的改版引导页面:
当时再紧张也应该打出一种实现方法,就是什么值得买这种使用图片实现
它首先加了一个半透明的黑色蒙层(background-color: rgba(0,0,0,.8))然后添加提前制作好的图片作为子元素,然后通过决定定位,让图片与被遮盖的部分的定位相同,制造出一种假的镂空的效果
虽然这种方式处理定位有一些麻烦,并且不适合页面有滚动的情况,滚动的时候可能出现错位。
但是当时怎么也应该答出这种方式,但是确实一面试就紧张,脑子不转了,就想着添加一个伪元素,但是不知道怎么穿透。
回来查了一些资料,找到了几种实现的方法
首先准备好要被遮罩的DOM结构:
这是要露出来的字
这是要露出来的字
这是要露出来的字
复制代码
以及样式:
.outer {
position: relative;
margin: 20px 0;
height: 500px;
background: darksalmon;
overflow: hidden;
}
.content {
width: 200px;
height: 80px;
color: #FFF;
line-height: 1.5;
background: #5b8b7b;
margin: 100px 0 0 100px;
}
复制代码
此时的效果:
要实现的效果:
透明边框
中间的镂空部分为实际的width和height,为完全透明的背景,而四周半透明的遮罩使用rgba的border来实现
.inner {
position: absolute;
left: 0;
top: 0;
box-sizing: content-box;
width: 200px;
height: 80px;
border-color: rgba(0, 0, 0, 0.5);
border-style: solid;
border-width: 100px 1500px 1500px 100px;
background: transparent;
}
复制代码
透明轮廓
使用边框的地方,大多数时候都可以使用轮廓outline来替代,实际上没有什么不同,只是要注意,outline是不占据文档流空间的,所以定位方式与使用border时不同
.inner2 {
position: absolute;
left: 100px;
top: 100px;
box-sizing: content-box;
width: 200px;
height: 80px;
outline: rgba(0, 0, 0, 0.5) 1500px solid;
background: transparent;
}
复制代码
透明阴影
还可以使用透明阴影实现,主要利用了阴影的第四个扩展半径这个参数
.inner3 {
position: absolute;
left: 100px;
top: 100px;
box-sizing: content-box;
width: 200px;
height: 80px;
box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1500px;
background: transparent;
}
复制代码
使用Canvas实现
可以使用强大的Canvas实现,当然使用Cavnas就需要使用脚本来编写了,虽然有些复杂,但是使用灵活,能够适应各种不同的要求,比如同时镂空多个等等。
使用Canvas也有两种方式来实现,第一种方式是使用clearRect方法,比较简单:
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, 1500, 1500);
ctx.clearRect(100, 100, 200, 80);
复制代码
另一种方式是自己通过path直接画出这样的一个形状,这里就需要介绍一下非零环绕规则
所以在画外围的半透明矩形时顺时针,那么里面镂空的矩形就需要逆时针:
const canvas = document.querySelector('#canvas2');
const ctx = canvas.getContext('2d');
// 外围
ctx.moveTo(0, 0);
ctx.lineTo(1500, 0);
ctx.lineTo(1500, 1500);
ctx.lineTo(0, 1500);
ctx.closePath();
// 内层
ctx.moveTo(300, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 180);
ctx.lineTo(300, 180);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fill();
复制代码
使用SVG实现
我对SVG基本上是不了解的,直接复制修改了一段代码
复制代码
也不是很复杂。
总结
如果页面布局尺寸都是固定的,可以使用CSS的三种方法实现
如果实现效果比较复杂,可以使用Canvas或者SVG实现
如果要偷懒,可以让UI出一张图片实现
参考
Html 点透镂空遮罩,CSS实现镂空遮罩相关推荐
- HTML怎么制作镂空文字遮罩,用纯 CSS 实现镂空效果
背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都是. 这样,做简单的图片背景镂空效果便不再困难了.关键代码只有几行. ...
- HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
近来研究了一下镂空效果. background-clip: text 背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都 ...
- css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果 发布时间:2021-03-19 09:49:16 来源:亿速云 阅读:99 作者:小新 小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
- 怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
- php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业
CSS绝对定位实现窗口遮罩功能: 这是HTML代码部分 实例 html> 绝对定位之遮罩 用户登录窗口 用户名: 密码: 登录 运行实例 » 点击 "运行实例" 按钮查看在线 ...
- mask属性是css3的吗_CSS遮罩——如何在CSS中使用遮罩
大概一年前,我写过一篇文章介绍有关webkit中新的css技术--css滤镜,如果其他浏览器不能支持的话会,这是个麻烦. 有关于Webkit中的滤镜,大家要是感兴趣的话可以阅读<CSS3 Fil ...
- css3全屏遮罩层,css3 引导遮罩层
https://blog.csdn.net/tangtang5963/article/details/51276560 要实现遮罩层和部分区域高亮显示,这里的思路是应用了元素的border属性,将元素 ...
- 前端遮罩层实现_css遮罩层怎么做?
现在大部分的网站,在我们点开一些活动页面是都会弹出一个类似领取红包,奖品等活动信息.也就是一个遮罩层,而实际上这遮罩层就是由简单的css来实现的.下面我们来看一下css如何做遮罩层. css使用可以使 ...
- 微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容(包括图片)
微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内可以滚动内容(包括图片) 效果图 这里的遮罩层内容由两张图片构成 底图+内部内容 实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
最新文章
- anaconda pip install torch报错,安装失败
- 第6章-MapReduce的工作机制-笔记
- OpenGL中glTranslate*(),glRotation*(),glScale*()函数的用法(*是参数数据类型)
- 上半年银行罚单不断,7月越早贷款越有利
- Docker-compose 安装与基本使用(四)
- 改变自己------每天进步一点点
- python中lambda()的用法_python中lambda()的用法
- 详解数据中心灾备切换技术
- Selenium的定位元素
- linux性能测试cpu内存io,Linux下磁盘IO性能测试工具介绍
- Android 多媒体【转】
- WPF 实现控件间拖拽内容
- java jshelllink_Jshell使用
- 批量生成小说人物名字
- 这样做,才能留住员工的心
- 产品结构图 VS 信息结构图 VS 功能结构图(附案例)
- php的原子操作,原子操作 · 国外PHP框架Nette官网教程 · 看云
- 脑电波-使用意念说话
- console.log 打印与预期结果不同
- 〖产品思维训练白宝书 - 产品思维认知篇⑧〗- 产品经理 日常面临的问题有哪些?
热门文章
- 压缩感知的未来研究方向
- 7年级计算机组成ppt,《第二课_计算机的硬件软件了解计算机系统的组成课件》初中信息技术滇教科课标版七年级全一册课件.ppt...
- Zigbee OSAL NV 区操作
- 异步任务神器 Celery 快速入门
- wow转服务器微信支付,魔兽世界经典旧世怀旧服 付费角色转移服务现已开启
- 【城市污水处理过程中典型异常工况智能识别】(基于迁移学习,拓扑结构卷积神经网络的污水异常工况识别)
- 基本数据类型和字符串的相关操作方法
- mvc4 renderpartial html,MVC4使用嵌套@ Html.RenderPartial()抛出编译器错误信息:CS1502...
- Xsens-MTI 670 ROS驱动安装及使用
- 独家丨花生大课堂白帆:用社交娱乐破题,重新定义“老年教育”