元素不是住DIV（/ W圖像背景）內

-1

http://codepen.io/apswak/pen/qNQxgA 元素不是住DIV（/ W圖像背景）內

我試圖創建一個背景圖片的標題。爲什麼我嵌入的每個元素都被推到背景圖像之上？有沒有更好的方法來做到這一點？

<div class="header"> 
    <h1>Lorem ipsum random stoof</h1> 
    <h3>Master.</h3> 
    </div> 

.header { 
    background-color: #222; 
    background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat; 
    background-size: cover; 
    height: 700px; 
    margin-top: -50px; 
    -webkit-filter: blur(1px); 
    -moz-filter: blur(1px); 
    -o-filter: blur(1px); 
    -ms-filter: blur(1px); 
    filter: blur(1px); 
}

來源

2016-08-08 Apswak

它似乎工作，如果你從'背景'刪除'100px'。 – Xufox

非常感謝，這工作 – Apswak

你也可以刪除保證金頂部，因爲我在解釋回答下面@Kreitzo –

兩個原因：

1）背景放置50% 100px推背景圖像100像素下來。只要刪除100px ...

2.） .header。刪除它或調整它 - 取決於你使用它後的內容。

http://codepen.io/anon/pen/RRqQOr

P.S：filter: blur(1px);將在.header模糊的一切，不只是背景圖片（也即文本）。你可能想刪除它...

來源

2016-08-08 23:43:24 Johannes

您的CSS代碼有錯誤。你有margin-top:-50px;這是一切拉起50px。刪除該行或將其更改爲某個正值，您將看到更改！

.header { 
 
    background-color: #222; 
 
    background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat; 
 
    background-size: cover; 
 
    height: 700px; 
 
    margin-top: 10px; 
 
    -webkit-filter: blur(1px); 
 
    -moz-filter: blur(1px); 
 
    -o-filter: blur(1px); 
 
    -ms-filter: blur(1px); 
 
    filter: blur(1px); 
 
}

<div class="header"> 
 
    <h1>Lorem ipsum random stoof</h1> 
 
    <h3>Master.</h3> 
 
    </div>

來源

2016-08-08 23:39:48

元素不是住DIV（/ W圖像背景）內

回答

相關問題