Question

我正在尝试进行视差滚动，一切正常。但我想要的是背景图像使用完整的页面宽度（如边对边），但背景两侧留有一点余量。

这是我的代码：

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

我尝试在所有视差类中设置position: absolute;和left: 0px;，但它会使所有图像聚集在一起，并且书面部分会被隐藏。请帮忙！

Answer 1

body标签的默认边距为8px。您需要使用Dirk答案中的代码将该边距设置为0。实际上，每个元素都有一个默认的边距和与之关联的填充。确保您完全控制每个元素的边距和填充的一种方法是使用全局选择器*并在css文件的顶部设置每个元素的边距和填充等于0。

* {   
    margin: 0;
    padding: 0;
}

Answer 2

body { margin:0; }

应解决您的问题

Answer 3

每个HTML元素都有一些DEFAULT边距。首先尝试将所有边距设置为0.

*{ margin: 0px;}

您也可以尝试为html或body标签设置0个边距。请在此处查看CSS默认值参考：

https://www.w3schools.com/cssref/css_default_values.asp

如何将背景图像宽度设置为边到边

3 个答案: