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

今天遇到一个问题:div边框和背景色随主题色变化,边框和字体不透明,背景半透明(如下图所示)在网上搜索解决办法发现都是说使用rgba,但是另外一个问题就来了,背景和边框的颜色就没办法改变了,所以只好自

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

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

在网上搜索解决办法发现都是说使用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、实际效果如下:

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

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

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
前端

css设置背景颜色半透明(教你2种方法实现背景颜色半透明)

2022-11-26 1:24:53

前端

css样式中文本及字体属性(前端css字体和文本详解)

2022-11-26 1:24:56

搜索