我正在尝试进行视差滚动，一切正常。 但我想要的是背景图像使用页面的完整宽度(如边到边)，但背景两边都留有一点边距。
这是我的代码:
.container{
max-width: 100%;
margin: 0 auto;
background: aqua;
font-size: 24px;
padding: 25px;
}
.parallax{
width: 100%;
background: url('Baradari.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
}
.parallax2{
width: 100%;
background: url('rumi-darwaza.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
}
.parallax3{
width: 100%;
background: url('rumi-darwaza.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="parallax">
</div>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="parallax2">
</div>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="parallax3">
</div>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>我尝试在所有视差类中设置 position: absolute; 和 left: 0px; 但这会使所有图像都放在一起并且隐藏了书写部分。
请帮忙!
最佳答案
body 标签有一个默认的 8px 边距。您需要使用德克答案中的代码将该边距设置为 0。实际上，每个元素都有一个默认的 margin 和 padding 与之相关。确保完全控制每个元素的边距和填充的一种方法是使用全局选择器 * 并在 css 文件顶部将每个元素的边距和填充设置为 0。
* {
margin: 0;
padding: 0;
}
关于css - 如何将背景图像宽度设置为边到边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46978159/