我可以僅將不透明度設置為div的背景圖像嗎？讓我說我有<div class="myDiv">Hi there</div>我想提出一個background-image并給它一個opacity的0.5-但我想，我寫的文字將有充分的不透明度（1）。如果我像這樣寫CSS.myDiv { opacity:0.5 }一切都將是低透明度 - 我不希望這樣。所以我的問題是 - 如何獲得具有完全不透明度文本的低不透明度背景圖像？
3 回答
阿晨1998
TA貢獻2037條經驗 獲得超6個贊
不，這不能做，因為opacity影響整個元素，包括其內容，并沒有辦法改變這種行為。您可以使用以下兩種方法解決此問題。
次要div
div向容器添加另一個元素以保存背景。這是最友好的跨瀏覽器方法，甚至可以在IE6上運行。
HTML
<div class="myDiv"> <div class="bg"></div> Hi there</div>
CSS
.myDiv {
position: relative;
z-index: 1;}.myDiv .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;}：before和::之前的偽元素
另一個技巧是使用CSS 2.1 :before或CSS 3 ::before偽元素。:beforeIE版本8支持偽元素，而::before根本不支持偽元素。這有望在第10版中得到糾正。
HTML
<div class="myDiv"> Hi there</div>
CSS
.myDiv {
position: relative;
z-index: 1;}.myDiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;}補充說明
由于您的行為，z-index您必須為容器設置z-index以及為z-index背景圖像設置負數。
測試用例
請參閱jsFiddle上的測試用例：
慕森卡
TA貢獻1806條經驗 獲得超8個贊
所以這是另一種方式：
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
紫衣仙女
TA貢獻1839條經驗 獲得超15個贊
CSS
div {
width: 200px;
height: 200px;
display: block;
position: relative;}div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;}HTML
<div> put your div content</div>
- 3 回答
- 0 關注
- 642 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消