背景として画像を使用するバナーがあります。画像のサイズは 670*303 です。バナー (画像) を画面の全幅に引き伸ばす方法はありますか。
デモはhttp://jsfiddle.net/zhshqzyc/xGQtF/2/にあります
また、エクストラカラー(背景色:#808000)もございます。
バナーの下に、それを削除する方法?
ありがとう。
背景として画像を使用するバナーがあります。画像のサイズは 670*303 です。バナー (画像) を画面の全幅に引き伸ばす方法はありますか。
デモはhttp://jsfiddle.net/zhshqzyc/xGQtF/2/にあります
また、エクストラカラー(背景色:#808000)もございます。
バナーの下に、それを削除する方法?
ありがとう。
background-size: 100%
トリックを行う必要があります。
繰り返すことができるグラデーションまたはパターンの場合は、使用できます
background-repeat:repeat-x;
または、「repeat-x」をバックグラウンド css のように挿入するだけです
background:url(images/blah.jpeg) repeat-x;
そうすれば、画像の小さなチャンクのみが必要になります>画像サイズが小さくなります>読み込み時間が短縮されます.
使用できる画像で表示されている色を取り除くには
background-color:transparent;
また、私が推測するように、バナーを片側から反対側にシームレスに伸ばしたい場合は、必ずボディスタイルを次のように設定してください
padding:0px;
width:100%;
と使用
margin:0px;
width:100%;
背景を含む div で。
本文のパディングを 0px に設定しなくても全幅に伸びる場合がありますが、一部のブラウザでは、設定されていない場合に本文のパディングが自動的に付与されるため、設定されている場合は無効になります。
曲線のエッジや頂点などを持つ画像を使用している場合、これは適切ではありません。単に引き伸ばしたいだけです (個人的には、詳細な画像の 99% では見栄えがよくないと思います)。次を使用できます。
background-size:100%;
私が助けたことを願っています=)