今天遇到一個問題：div邊框和背景色隨主題色變化，邊框和字體不透明，背景半透明（如下圖所示）
設計圖
在網上搜索解決辦法發現都是說使用rgba，但是另外一個問題就來了，背景和邊框的顏色就沒辦法改變了，所以只好自己想辦法。突發奇想使用偽類完美解決了問題，話不多說，上代碼（此處樣式部分使用了scss，不懂的請自行百度）
<!-- html代碼 -->
<div class="box">
內容
</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;
}
}
實際效果
背景和框架完成了，內容就自己解決啦~
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/275160.html
微信掃一掃 
支付寶掃一掃 