我试图在我的 CSS 中显示背景图片,并使用了图片的相对路径。我尝试过使用不同的浏览器,但似乎没有任何效果。 下面是我的 HTML。
<header>
<h2><a href="#">Rachel Doyle Studio</a></h2>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#">Embroidery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</nav>
</header>
<section class="thimble">
<div class="background-image" style="background-image: url(assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)"></div>
<div class="thimble-content-area">
<h1>Rachel Doyles Studio</h1>
</div>
</section>
下面是 background-image 类的 CSS 样式。
.thimble background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
即使我有正确的 jpeg 路径,为什么它会这样做。
最佳答案
您可以使用此代码
body {
margin: 0;
}
.thimble .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('https://www.w3schools.com/images/picture.jpg');
background-repeat: no-repeat;
z-index: -1;
}
<header>
<h2><a href="#">Rachel Doyle Studio</a></h2>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#">Embroidery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</nav>
</header>
<section class="thimble">
<div class="background-image"></div>
<div class="thimble-content-area">
<h1>Rachel Doyles Studio</h1>
</div>
</section>
关于html - 背景图片不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56960980/