我有这张图片，我想在我的首页上显示。 它位于我的背景图像之上(具有 100% 的工作跨度) 但是它上面的图像有一个 +- 5px 的小边框显示背景。边界需要去:)
我的 CSS 看起来像这样:(导航固定在顶部)
body {
background: url(backgr_1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
background-size:cover;
}
nav {
position:fixed;
z-index: 100;
top:0;
left:0;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 58px;
font-family: 'chineserocks';
font-size: 3em;
}
ul {
list-style-type: none;
margin-top: 0;
}
li {
display: inline-block;
}
a {
color: #FFFFFF;
text-decoration: none;
margin-left: 4em;
}
#backroots_head {
width: 100%;
}
#head_section {
width: 100%;
}
我的 HTML 是这样的:
<body>
<section id="head_section">
<img id="backroots_head" src="backroots_head.jpg">
</section>
以及所有其他 html 等
这是基本的东西。
我尝试过的: - 添加最大宽度 3000px - 边距 0，填充 0 - 宽度 105%(是的，我很绝望 xD) - 位置固定(有效，但你无法滚动到图片下方的内容。 - 在其周围添加宽度为 100% 的 div
图像或部分周围没有设置宽度的容器，所以这也不是问题。 我真的坚持这个。欢迎任何解决方案。 亲切的问候
最佳答案
我将正文边距设置为 0 以消除图像周围的空间。它对我来说是 100% 的。
<html>
<head>
<style>
body { margin: 0px; }
#backroots_head { width: 100%; }
</style>
</head>
<body>
<section id="head_section"><img id="backroots_head" src="backroots_head.jpg"></section>
</body>
</html>
关于html - 无法将图像设置为 100% 宽度(不是因为容器太小，也不是背景)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27154019/