css背景颜色半透明代码(背景半透明但边框和内容不透明的方法)

 分类:div+css教程时间:2022-08-29 07:30:02点击:

今天遇到一个问题:div边框和背景色随主题色变化,边框和字体不透明,背景半透明(如下图所示)

在网上搜索解决办法发现都是说使用rgba,但是另外一个问题就来了,背景和边框的颜色就没办法改变了,所以只好自己想办法。突发奇想使用伪类完美解决了问题,话不多说,上代码(此处样式部分使用了scss,不懂的请自行百度)

css背景颜色半透明代码如下:

1、html代码

<div class="box">
  内容
</div>

2、scss代码

$primary:#2CD334;
.box {
      position: relative;
      border: 1px solid $primary;
      width:100px;
      height: 100px;
      border-radius: 12px;
      &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: $primary;
        opacity: 0.1;
        top: 0;
        left: 0;
      }
}

3、实际效果如下:

背景和框架完成了,内容就自己解决啦~

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: