帮助我真的不知道该做什么,我确实在W3学校的网站上查看了所有关于css和HMTL的东西,但是没有任何东西起作用。 文件路径正确,但div类=“mainbanner”的背景不起作用。
null
<html>
<head>
<style>
* {
background-color: black;
margin: 0;
padding: 0;
}
.mainBanner {
background-image: url(/images/background.jpg);
color: #ffffff;
text-align: center;
height: 700px;
}
</style>
</head>
<div class="container mainBanner">
<h1>Welcome to The Travellers Website</h1>
<h4>You're all in one solution for perfect travels. Make memories and take step across
islands you've never seen before.</h4>
</div>
</html>
<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->
null
假设图像位于正确的位置,您可能会收到问题,因为您还没有设置图像本身的高度/宽度。 您可以使用background-size
执行此操作
null
* {
background-color: black;
margin: 0;
padding: 0;
}
.mainBanner {
background-image: url(https://i.imgur.com/7a4DOBA.jpg);
background-size:100% 100%;
color: #ffffff;
text-align: center;
height: 700px;
}
<html>
<div class="container mainBanner">
<h1>Welcome to The Travellers Website</h1>
<h4>You're all in one solution for perfect travels. Make memories and take step across
islands you've never seen before.</h4>
</div>
</html>
<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->
background: url(/images/background.jpg) center no-repeat ;