css不透明度的設(shè)置 css背景不透明
2024-08-28
更新時間:2024-08-28 09:04:04作者:佚名
今天遇到一個問題:div邊框和背景色隨主題色變化,邊框和字體不透明,背景半透明(如下圖所示)
設(shè)計(jì)圖
在網(wǎng)上搜索解決辦法發(fā)現(xiàn)都是說使用rgba,但是另外一個問題就來了,背景和邊框的顏色就沒辦法改變了,所以只好自己想辦法。突發(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)容就自己解決啦~