CSSでbackground-repeat属性を使用する方法-htmlチュートリアル-php.cn

CSSでbackground-repeat属性を使用する方法

黄舟

リリース： 2017-06-21 15:06:44

オリジナル

3645 人が閲覧しました

構文:

background-repeat : repeat | no-repeat | repeat-x | repeat-y

ログイン後にコピー

パラメータ:

repeat: 背景画像は垂直方向と水平方向に並べて表示されます
no-repeat: 背景画像は並べて表示されません
repeat-x: 背景画像は水平方向に並べて表示されます
repeat-y:背景画像は垂直方向に並べて表示されます

説明:

オブジェクトの背景画像を配置するかどうか、およびどのように配置するかを設定または取得します。最初にオブジェクトの背景画像を指定する必要があります。
対応するスクリプト機能はbackgroundRepeatです。私が書いた他の本もご覧ください。

例:

menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } 
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

ログイン後にコピー

これは25px×25pxの画像です。3つのdiv要素を200px×100pxに設定し、div要素の背景画像をこの画像に設定します。

CSSでbackground-repeat属性を使用する方法

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>background-repeat属性</title>
    <style type="text/css">
        /*设置div元素的共同样式*/
        div
        {
            width:200px;
            height:100px;
            background-image:url("../App_images/lesson/run_cj/flower.jpg");
            text-align:center;
            border:1px dashed gray;
        }
        /*设置3个div元素的个别样式*/
        #div2{background-repeat:repeat-x;}
        #div3{background-repeat:repeat-y;}
        #div4{background-repeat:no-repeat;}
        hr{border-color:red;}
    </style>
</head>
<body>
    <div id="div1">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div2">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div3">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div4">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
</body>
</html>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです:

CSSでbackground-repeat属性を使用する方法

分析:

ブラウザはbackground-repeatのデフォルトを使用するため、最初のdiv要素はbackground-repeat属性値を設定しないからです。値を "repeat" にすると、背景画像が水平方向と垂直方向の両方に並べて表示されます。 2番目のdiv要素のbackground-repeat属性値は「repeat-x」であるため、背景画像は水平(x軸)に並べて表示されます。 3番目のdiv要素のbackground-repeat属性の値が「repeat-y」なので、背景画像が縦方向(y軸)に並べて表示されます

hr要素の属性設定が気になるかもしれません。 hr の border-color を設定しますか? 属性値が赤の場合、hr の color 属性を赤に設定するのではなく、background-color に設定しますか?これは hr 自体の特性に関連しており、CSS の詳細な「HR CSS 設定」セクションで詳しく説明します。

注: 背景画像を含む要素の幅または高さが、背景画像自体の幅または高さよりも大きい場合にのみ、タイリング効果が発生します。

以上がCSSでbackground-repeat属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。