我可以將opacity屬性分配給僅background屬性div而不是其上的文本嗎？我試過了：background: #CCC;opacity: 0.6;但這不會改變不透明度。
3 回答
猛跑小豬
TA貢獻1858條經驗 獲得超8個贊
聽起來您想使用透明背景，在這種情況下，您可以嘗試使用以下rgba()功能：
rgba(R, G, B, A)
R（紅色），G（綠色）和B（藍色）可以是<integer>s或<percentage>s，其中數字255對應于100％。a（α）可以是<number>0到1之間的a <percentage>，也可以是a ，其中數字1對應于100％（完全不透明）。
RGBa示例
rgba(51, 170, 51, .1) /* 10% opaque green */
rgba(51, 170, 51, .4) /* 40% opaque green */
rgba(51, 170, 51, .7) /* 70% opaque green */
rgba(51, 170, 51, 1) /* full opaque green */
一個顯示如何使用的小示例rgba。
從2018年開始，幾乎每個瀏覽器都支持rgba語法。
慕運維8079593
TA貢獻1876條經驗 獲得超5個贊
最簡單的方法是2個div，1個帶有背景，1個帶有文本：
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
慕容森
TA貢獻1853條經驗 獲得超18個贊
僅針對較少的用戶：
如果您不喜歡使用RGBA設置顏色，而是使用十六進制設置顏色，那么有解決方案。
您可以使用mixin，例如：
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
并像這樣使用它：
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
實際上，這也是內置的Less函數所提供的：
.myClass {
background-color: fade(#FFFFFF, 50%);
}
請參閱如何使用Less編譯器將十六進制顏色轉換為rgba？
- 3 回答
- 0 關注
- 566 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消