html背景圖片無法正常顯示

我的圖片顯示有些問題。下面是我的代碼：html背景圖片無法正常顯示

.night-sky { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
    background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
} 
 
.night-sky:before { 
 
    height: 100%; 
 
    width: 100%; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    /* http://bg.siteorigin.com/ */ 
 
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png"); 
 
    opacity: .1; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background: #000; 
 
}

<body> 
 
    <div class="night-sky"> 
 
    <p>qerqwer</p> 
 
    <p>hahahh</p> 
 
    </div> 
 
</body>

這是怎麼看起來像現在：

如果我不添加類的div class = "night-sky"之間的一段，它什麼也沒有顯示。但如果我只是在身體中添加background-image，它會正確顯示。我不知道什麼是錯的。

謝謝。

來源

2016-11-14 BeNice

可能是因爲你有個高度，寬度沒有定義。所以除非有元素，否則夜晚有寬度/高度。因此沒有bg可見。看到沒有段落的樣本小提琴。 https://jsfiddle.net/5a2xowwg/ – aVC

鏈接：-http：//www.html.am/html-codes/image-codes/background-image-code.cfm –

html, body { height: 100%; width: 100%; margin: 0;} 
 

 
.night-sky { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
    background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
} 
 
.night-sky:before { 
 
    width: 100%; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    /* http://bg.siteorigin.com/ */ 
 
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png"); 
 
    opacity: .1; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background: #000; 
 
}

<body> 
 
    <div class="night-sky"> 
 
    <p>qerqwer</p> 
 
    <p>hahahh</p> 
 
    </div> 
 
</body>

來源

2016-11-14 03:06:11 mrid

謝謝，mrid！，我學到了很多。 – BeNice

添加height: 100%到html這將解決這個問題。

幾點建議：

你可以看到，現在會有頂部一定的餘量 - 這是以由於保證金倒塌（你可以在this SO thread閱讀更多關於它）。要刪除此添加border到night-sky
完成它了：
```
* { 
    box-sizing: border-box; 
} 
```
，以便有對身體沒有滾動條 - 爲什麼border-box是很重要的this SO thread

乾杯!

* { 
 
    box-sizing: border-box; 
 
} 
 
html{ 
 
    height: 100%; 
 
} 
 
.night-sky { 
 
    position: relative; 
 
    height: 100%; 
 
    margin: 0; 
 
    
 
    border: 1px solid black; 
 
    
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
    background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%); 
 
} 
 
.night-sky:before { 
 
    height: 100%; 
 
    width: 100%; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0; 
 
    /* http://bg.siteorigin.com/ */ 
 
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png"); 
 
    opacity: .1; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background: #000; 
 
}

<body> 
 
    <div class="night-sky"> 
 
    <p>qerqwer</p> 
 
    <p>hahahh</p> 
 
    </div> 
 
</body>

來源

2016-11-14 03:14:15 kukkuz

@BeNice讓我知道您對此的反饋，謝謝！ – kukkuz

試試這個： -

<div style="background-image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:220px;height:140px;"> 
 

 
</div>

來源

2016-11-14 05:54:03

如果你想要，你可以隨意改變高度和寬度。 –

html背景圖片無法正常顯示

回答

相關問題