今天遇到一個(gè)問(wèn)題：div邊框和背景色隨主題色變化，邊框和字體不透明，背景半透明（如下圖所示）
設(shè)計(jì)圖
在網(wǎng)上搜索解決辦法發(fā)現(xiàn)都是說(shuō)使用rgba，但是另外一個(gè)問(wèn)題就來(lái)了，背景和邊框的顏色就沒(méi)辦法改變了，所以只好自己想辦法。突發(fā)奇想使用偽類(lèi)完美解決了問(wèn)題，話不多說(shuō)，上代碼（此處樣式部分使用了scss，不懂的請(qǐng)自行百度）
<!-- html代碼 -->
<div class="box">
內(nèi)容
</div>
/* 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;
}
}
實(shí)際效果
背景和框架完成了，內(nèi)容就自己解決啦~
