首页 > 其他分享 >使用伪元素为dom元素写一个蒙层

使用伪元素为dom元素写一个蒙层

时间:2024-01-28 15:11:07浏览次数:31  
标签:元素 Overlay color 0.2 蒙层 dom

把下方css样式复制给任一元素,修改宽高属性即可增加蒙层

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Overlay with Pseudo-element</title>
</head>
<body>
  <div class="overlay-container">
    <img src="your-image-url.jpg" alt="Your Image">
    <div class="overlay"></div>
  </div>
</body>
</html>

 

.gateway::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 768px;
  background-color: rgba(0, 0, 0, 0.2); /* 调整蒙层的透明度和颜色 */
  pointer-events: none; /* 让蒙层不干扰鼠标事件传递到下面的元素 */
}

 

标签:元素,Overlay,color,0.2,蒙层,dom
From: https://www.cnblogs.com/Simoon/p/17992891

相关文章

  • Python手相识别教程16四种元素手型分类
    16四种元素分类16.1火、水、气、土虽然手掌的七种原型是评估性格的首选指南,但从多个角度看手掌也是明智之举。七种原型可以让我们看到人类大家庭中更广泛的差异。原型与原型之间的相互结合,以及基本修饰语的应用,可以让我们深入了解我们正在阅读的人的手相。虽然七种原型提供了......
  • JavaScript DOM对象的尺寸和位置详解
    在DOM对象操作中,其尺寸和位置也是DOM的核心内容,因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作,特别是js动画效果。一、关于DOM对象的尺寸和位置介绍DOM对象的尺寸和位置的属性DOM对象的属性描述obj.scrollWidth和obj.scrollHeightDOM对象的内部实......
  • JavaScript DOM之Cookie详解
    cookie有的地方习惯使用复数形式的cookies,指的是网站为了识别用户的身份或者进行一些必要数据的缓存而使用的技术,它的数据是存在用户的终端上,也就是在浏览器上的。一、什么是cookie随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来,我们常常需要记录访问者的一些信息,比......
  • JavaScript DOM对象的尺寸和位置详解
    在DOM对象操作中,其尺寸和位置也是DOM的核心内容,因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作,特别是js动画效果。一、关于DOM对象的尺寸和位置介绍DOM对象的尺寸和位置的属性DOM对象的属性描述obj.scrollWidth和obj.scrollHeightDOM对象的内部......
  • JavaScript DOM之Cookie详解
    cookie有的地方习惯使用复数形式的cookies,指的是网站为了识别用户的身份或者进行一些必要数据的缓存而使用的技术,它的数据是存在用户的终端上,也就是在浏览器上的。一、什么是cookie随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来,我们常常需要记录访问者的一些信息,......
  • 82. 删除排序链表中的重复元素 II(中)
    目录题目题解:双指针题目给定一个已排序的链表的头head,删除原始链表中所有重复数字的节点,只留下不同的数字。返回已排序的链表。题解:双指针题目给的头节点是第一个元素,处理起来较麻烦(需单独处理头节点);加上习惯用一个空的头节点,所以本题新建了一个虚拟头节点,以便统一......
  • 代码随想录算法训练营第三天| 203.移除链表元素,707.设计链表 ,206.反转链表
    203.移除链表元素给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val==val 的节点,并返回 新的头节点 。题目链接:203.移除链表元素-力扣(LeetCode)注意c++中NULL和nullptr的区别。应该用nullptr来表示空指针。/***Definitionforsingly......
  • python之常用标准库-random
    1.randomdefrandom(self):"""Getthenextrandomnumberintherange[0.0,1.0)."""return(int.from_bytes(_urandom(7),'big')>>3)*RECIP_BPF翻译:获取0,1之间的随机浮点数1#!/usr/bin/python2importrandom3p......
  • rpa使用自带数据抓取方式抓取页面元素
    大家好,我是一方。今天我们一起看一下如何使用rpa自带的功能来抓取自己想要的页面元素,这里我们以抖音为例来抓取某个领域的作者列表。想要获取页面元素,大概的流程为:确定页面元素、分析页面元素、使用自带的工具便捷抓取元素。我们正式开始,首先新建一个抖音作者列表的项目,并快速......
  • 在 Python 中如何实现列表元素去重
    在日常的Python编程中,我们经常需要对列表进行去重操作,以便保证程序的正确性和效率。Python提供了多种方法来实现列表元素去重,本文将介绍其中的四种方法。一、使用set()函数set()函数是Python内置的去重函数,它可以使列表中的元素不重复,并将其转换为集合类型,最后再转换回列表类型。具......