CSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介-CSSチュートリアル-php.cn

CSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介

不言

リリース： 2018-10-08 14:11:16

オリジナル

34920 人が閲覧しました

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>

ログイン後にコピー

CSS 背景画像タイル化効果は次のとおりです:

CSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介

#css 背景画像タイルは X 軸と Y 軸方向にタイル化されていません:

<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 背景は X 軸と Y 軸方向にタイル化されています軸の方向どの方向にもタイル化しない場合の効果は次のとおりです。

CSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介

css 背景画像をタイル状に並べる水平方向にタイル状に並べる背景:

背景画像これで、

##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 の垂直タイル背景効果は次のとおりです: CSSで背景画像を並べて表示するにはどうすればよいですか? CSS背景画像を並べて表示する4つの方法の紹介