ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介
CSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介
- 不言オリジナル
- 2018-10-08 14:11:1634866ブラウズ
Web デザインのプロセスでは、Web ページ全体の見栄えを良くするために、背景画像をタイル化する必要がある場合があります。これは、本文の幅と高さを特に設定せずに、画像タイルを直接平坦化することができます。ページ全体では、背景画像タイルを作成するにはどうすればよいでしょうか?次に、CSSを使用して背景画像タイルを作成する方法を紹介します。必要な友達は参考にしてください。
まずは背景画像のタイリングのCSS設定を見てみましょう。
repeat: デフォルト モード。背景を完全にタイル表示します。
no-repeat: X 軸および Y 軸方向にタイル表示しません。 : 背景を水平方向に並べて表示します。
repeat-y: 背景を垂直方向に並べて表示します。
CSS でのこれら 4 つの背景画像タイルの実装コードを見てみましょう。
背景を完全にタイル化するための CSS 背景画像タイル化コード:<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>
背景画像 これで、
##CSS 背景画像タイルの水平方向のタイル操作のみが実行されます。 垂直タイル背景:
背景画像は、Y 軸上でのみタイル表示されます。つまり、水平であり、水平にタイル表示されていません
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-x;
}
</style>
<div id="content">
</div>
</body>
</html>
css の垂直タイル背景効果は次のとおりです: 
##上記はこの記事の概要です。さらに興味深い内容については、php 中国語 Web サイトに注目してください。
以上がCSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。