設置不透明度的背景圖像與網址在css

-1

我使用引導與HTML5一起開發一個網站。我有一個網站標題。我希望在網站標題中使用一些不透明度的圖片，並在其中添加一些文字。我已經提到這個鏈接setting opacity for background image並嘗試實施它。我有文字，但沒有圖像。設置不透明度的背景圖像與網址在css

下面是代碼：

HTML：

<div class="page-header head"> 
<div class="hbg"></div> 
Hi there 
</div>

CSS：

.head{ 
position: relative; 
z-index: 1; 
margin-top:10px; 
height: 170px; 
} 

.head .hbg 
{ 
background: url('hbg.png'); 
background-size: 100% 100%; 
opacity: 0.3; 
z-index: -1; 
}

什麼是這裏的問題？

來源

2014-10-17 xxx

「問題是什麼嗎？」那麼，你應該告訴我們... – feeela 2014-10-17 15:32:51

您需要添加的位置是：絕對的; top：0;左：0;到.hbg和寬度的100％的高度，因此遍佈父容器:)

.head { 
 
    position: relative; 
 
    z-index: 1; 
 
    margin-top: 10px; 
 
    height: 170px; 
 
} 
 
.head .hbg { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    background: url('http://gillespaquette.ca/images/stack-icon.png'); 
 
    background-size: cover; 
 
    opacity: 0.3; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="page-header head"> 
 
    <div class="hbg"></div> 
 
    Hi there 
 
</div>

來源

2014-10-17 15:46:59

這裏寬度和高度的目的是什麼？如果我刪除它，圖像消失。爲什麼？ – xxx 2014-10-17 15:53:26

您需要在.hbg上添加寬度和高度，以便填充其父容器。該圖像只是.hbg的背景，並沒有在寬度和高度上發揮作用，它會傳播到它被添加爲背景的元素有多大。:) – 2014-10-17 15:57:02

好了吧:) :) :) – xxx 2014-10-17 15:59:05

.head .bg不存在於上面的代碼中。更改爲.hbg。

來源

2014-10-17 15:33:09 saZmer

我有改變了它。但仍然沒有效果。 – xxx 2014-10-17 15:37:33

請查看我更新的代碼 – xxx 2014-10-17 15:39:26

您正在查閱的文章使用 position：absolute; z-index：-1; top：0; bottom：0; left：0; right：0; 嘗試添加.. – saZmer 2014-10-17 15:43:20

這是怎麼回事？

<div class="page-header head"> 
Hi there 
</div>

.head{ 
    width: 300px; 
    height: 250px; 
    display: block; 
    position: relative; 
} 

.head::after { 
    content: ""; 
    background: url(hbg.png); 
    opacity: 0.3; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

來源

2014-10-17 15:43:53

設置不透明度的背景圖像與網址在css

回答

相關問題