css 元素使用背景色加透明度，伪元素背景色不生效问题

最新推荐文章于 2023-09-09 10:29:14 发布

心若向阳(*￣︶￣)

最新推荐文章于 2023-09-09 10:29:14 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人项目 css less 文章标签： css less 伪元素 opacity rgba

本文链接：https://blog.csdn.net/agua001/article/details/124241453

个人项目同时被 3 个专栏收录

144 篇文章

订阅专栏

css

16 篇文章

订阅专栏

less

3 篇文章

订阅专栏

本文探讨了如何在元素带有背景色和透明度的情况下，确保伪元素能够正确覆盖。作者提供了两种解决方案，一是使用`rgba`替代`#1890FC`，二是调整伪元素的透明度设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、元素使用了背景色且透明度，伪元素覆盖不了

.all-alarm {
	color: #fff;
    background: #1890FC;
    opacity: 0.6;
    &::before {
     content: "";
      left: 0px;
      top: 0px;
      position: absolute;
      width: 3px;
      height: 0.38rem;
      background: #1890FC;
      opacity: 1;
    }
}

在这里插入图片描述

2、修改成使用rgba

.all-alarm {
  color: #fff;
  background: rgba(24, 144, 252, .6);
  &::before {
    content: "";
    left: 0px;
    top: 0px;
    position: absolute;
    width: 3px;
    height: 0.38rem;
    background: #1890FC;
  }
}

在这里插入图片描述