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背景图片无法正常显示

回答

相关问题