HTML+CSS37 镂空遮罩

最新推荐文章于 2024-04-17 01:19:54 发布

「已注销」

最新推荐文章于 2024-04-17 01:19:54 发布

阅读量2.4k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/duola8789/article/details/99718192

版权

前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面：

当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现

它首先加了一个半透明的黑色蒙层（background-color: rgba(0,0,0,.8)）然后添加提前制作好的图片作为子元素，然后通过决定定位，让图片与被遮盖的部分的定位相同，制造出一种假的镂空的效果

虽然这种方式处理定位有一些麻烦，并且不适合页面有滚动的情况，滚动的时候可能出现错位。

但是当时怎么也应该答出这种方式，但是确实一面试就紧张，脑子不转了，就想着添加一个伪元素，但是不知道怎么穿透。

回来查了一些资料，找到了几种实现的方法

首先准备好要被遮罩的DOM结构：

<div class="outer">
  <div class="content">
    <p>这是要露出来的字</p>
    <p>这是要露出来的字</p>
    <p>这是要露出来的字</p

关注