2017-10-27 10 views
-1

私は視差スクロールをしようとしていますが、すべてうまくいきます。 しかし、私が望むのは、背景画像がページの完全な幅を(エッジとエッジのように)使用するが、背景の両側に少しの余白が残っているということだ。ここで背景画像の幅を端から端まで設定する方法

は私のコードです:

.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;を設定しようとしたが、それはすべての画像が一緒に来て、書かれた部分が隠さ取得になるだろう。 助けてください!

答えて

1
body { margin:0; } 

すべてのHTML要素はいくつかのデフォルトのマージンを持って、あなたの問題

1

を修正する必要があります。 最初はすべての余白を0に設定してください。

*{ margin: 0px;} 

また、htmlタグまたはbodyタグのために0マージンを設定することもできます。 ご確認くださいCSSのデフォルト値は、ここで参照:

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

1

bodyタグは、それに関連8pxのデフォルトのマージンを持っています。 Dirkの答えにあるコードを使用して、そのマージンを0に設定する必要があります。実際には、すべての要素にデフォルトマージンとパディングが関連付けられています。すべての要素のマージンとパディングを完全に制御できる方法の1つは、グローバルセレクタ*を使用して、CSSのファイルの先頭にあるすべての要素のマージンとパディングを0に設定することです。

* { 
    margin: 0; 
    padding: 0; 
} 
関連する問題