How to use the background-repeat attribute in css-HTML Tutorial-php.cn

How to use the background-repeat attribute in css

黄舟

Release： 2017-06-21 15:06:44

Original

3653 people have browsed it

Syntax:

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

Copy after login

Parameters:

repeat: Background imageTile vertically and horizontally
no-repeat: The background image is not flat Paving
repeat-x: The background image is tiled horizontally
repeat-y: The background image is tiled vertically

Description:

Sets or retrieves whether the background image of the object is and how to lay it out. The object's background image must first be specified.
The corresponding script feature is backgroundRepeat. Please see other books I have written.

Example:

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

Copy after login

Here is a 25px×25px picture. We set 3 div elements to 200px×100px, and set the div element background image to this picture.

How to use the background-repeat attribute in css

<!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>

Copy after login

The preview effect in the browser is as follows:

How to use the background-repeat attribute in css

Analysis:

Because the first The div element does not set the background-repeat attribute value, because the browser will use the default value of background-repeat "repeat", and the background image will be tiled in both horizontal and vertical directions. The background-repeat attribute value of the second div element is "repeat-x", so the background image will be tiled horizontally (x-axis). The background-repeat attribute value of the third div element is "repeat-y", so the background image will be tiled in the vertical direction (y-axis)

You may be strange about the attribute setting of the hr element. Why is it set hr? If the border-color attribute value is red, the color of hr will change. Instead of setting the color attribute of hr to red or background-color to red? This is related to the characteristics of hr itself, which we will explain in detail in the CSS Advanced "HR CSS Settings" section.

Note: Only when the width or height of the element with a background image is larger than the width or height of the background image itself will the tiling effect occur.

The above is the detailed content of How to use the background-repeat attribute in css. For more information, please follow other related articles on the PHP Chinese website!