私は視差スクロールをしようとしていますが、すべてうまくいきます。 しかし、私が望むのは、背景画像がページの完全な幅を(エッジとエッジのように)使用するが、背景の両側に少しの余白が残っているということだ。ここで背景画像の幅を端から端まで設定する方法
は私のコードです:
.container{
\t max-width: 100%;
\t margin: 0 auto;
\t background: aqua;
\t font-size: 24px;
\t padding: 25px;
}
.parallax{
\t width: 100%;
\t background: url('Baradari.jpg') no-repeat center;
\t background-size: cover;
\t background-attachment: fixed;
\t height: 500px;
}
.parallax2{
\t width: 100%;
\t background: url('rumi-darwaza.jpg') no-repeat center;
\t background-size: cover;
\t background-attachment: fixed;
\t height: 500px;
}
.parallax3{
\t width: 100%;
\t background: url('rumi-darwaza.jpg') no-repeat center;
\t background-size: cover;
\t background-attachment: fixed;
\t height: 500px;
}
<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset="utf-8">
\t \t <title>Parallax</title>
\t \t <link rel="stylesheet" href="style.css">
\t </head>
\t <body>
\t \t <div class="container">
\t \t \t <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>
\t \t </div>
\t \t <div class="parallax">
\t \t </div>
\t \t <div class="container">
\t \t \t <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>
\t \t </div>
\t \t <div class="parallax2">
\t \t </div>
\t \t <div class="container">
\t \t <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>
\t \t </div>
\t \t <div class="parallax3">
\t \t </div>
\t \t <div class="container">
\t \t \t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
\t 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.
\t It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
\t 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>
\t \t </div>
\t </body>
</html>
私はすべての視差のクラスでposition: absolute;
とleft: 0px;
を設定しようとしたが、それはすべての画像が一緒に来て、書かれた部分が隠さ取得になるだろう。 助けてください!