我正在尝试在图像上添加内容，但我不确定将代码放在哪里。当我将它置于一切之上时，它具有优先权并且我的代码都没有显示。但是，当我将图像放在正文 CSS 中时，它会显示，但我在尝试将下一行代码放在图像末尾而不是最后一行代码下方的图像上时遇到问题，在这种情况下是立即购买.我很确定我把 IMG 代码放在了错误的地方。我感谢任何人的帮助。
HTML:
<body>
<div class="Image">
<img src="C:\Users\Gabriel\Downloads\Green-blur.jpg"/>
<ul id="nav">
<li id="brand"><a href="#">MINIMAL</a></li>
<li id="navm"><a href="#">Men</a></li>
<li id="navm"><a href="#">Women</a></li>
<li id="navm"><a href="#">Contact</a></li>
</ul>
<h1>Simplicity is Minimal</h1>
<div id="home">
<a href="#" id="homeb">Shop Now</a>
</div>
</div>
</body>
CSS:
<!--Content from code shows-->
body {
background-image: url();
background-size: 100% 130%;
background-repeat: no-repeat;
font-family: "PT Sans", sans-serif;
}
<!--IMAGE TAKES PRIORITY-->
img {
height: 1000px;
background-repeat: no-repeat;
}
最佳答案
是这样的吗？
body {
font-family: "PT Sans", sans-serif;
}
.image {
background: url("https://www.blogcdn.com/www.joystiq.com/media/2011/06/respawngameblurryimage530pxheaderimg.jpg");
background-size: cover;
}
li {
display: inline-block;
padding-right: 10px;
}
li a{
color: white;
}<div class="image">
<ul id="nav">
<li id="brand"><a href="#">MINIMAL</a></li>
<li id="navm"><a href="#">Men</a></li>
<li id="navm"><a href="#">Women</a></li>
<li id="navm"><a href="#">Contact</a></li>
</ul>
<h1>Simplicity is Minimal</h1>
<div id="home">
<a href="#" id="homeb">Shop Now</a>
</div>
</div>注意:删除 HTML 中的图像并将其添加到 CSS。
希望对你有帮助
关于html - 图像显示在内容之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42984276/