css不透明度的設(shè)置 css背景不透明
2024-08-28
網(wǎng)站首頁
手機(jī)版
更新時(shí)間：2024-08-28 09:04:04作者：佚名
今天遇到一個(gè)問題：div邊框和背景色隨主題色變化，邊框和字體不透明，背景半透明（如下圖所示）
設(shè)計(jì)圖
在網(wǎng)上搜索解決辦法發(fā)現(xiàn)都是說使用rgba，但是另外一個(gè)問題就來了，背景和邊框的顏色就沒辦法改變了，所以只好自己想辦法。突發(fā)奇想使用偽類完美解決了問題，話不多說，上代碼（此處樣式部分使用了scss，不懂的請自行百度）
<!-- 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)容就自己解決啦~