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

最新推荐文章于 2023-04-11 17:43:29 发布

心若向阳(*￣︶￣)

最新推荐文章于 2023-04-11 17:43:29 发布

阅读量1.3k

点赞数

分类专栏：个人项目 css less

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

版权

css less 伪元素 opacity rgba

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

144 篇文章 5 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

less

3 篇文章 0 订阅

订阅专栏

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;
  }
}

在这里插入图片描述