CSS - background 属性

CSS background 属性是一个简写属性，可以一次设置多个背景属性。可以一次设置背景颜色、图像、位置、大小、重复、原点、裁剪和附件等属性。此属性用于设置元素的外观样式。

语法

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

属性值

值	描述
background-color	指定要使用的背景颜色。
background-image	指定一个或多个要使用的背景图像。
background-position	指定背景图像的位置。
background-size	指定背景图像的大小。
background-repeat	指定如何重复背景图像。
background-origin	指定背景图像的定位区域。
background-clip	指定背景图像的绘制区域。
background-attachment	指定背景图像的滚动类型。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 背景属性示例

以下示例说明了**background**属性及其各个组成部分的工作方式。

设置背景颜色

**background**属性的background-color组件设置元素的背景颜色。在下面的示例中，background-color属性用于将div标签的背景颜色设置为红色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            background-color: red;
            padding: 20px;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div>
        <p> This is some text.</p>
    </div>
</body>

</html>

设置背景图片

**background**属性的background-image组件设置元素的背景图片。在下面的示例中，background-image属性用于将背景图片设置为花朵。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            height: 200px;
            background-image: url('/css/images/border.png');
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>

</body>

</html>

设置背景位置

**background**属性的background-position组件设置元素的背景位置。在下面的示例中，background-position属性用于将背景位置设置为居中。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #box {
            height: 200px;
            border: 8px solid black;
            padding: 25px;
            background-position: center;
            background-image: url("/css/images/orange-flower.jpg");
        }
    </style>
</head>

<body>

    <h2>The background-position Property</h2>
    <p>Center Position</p>
    <div id="box">
    </div>

</body>

设置背景大小

**background**属性的background-size组件设置元素的背景大小。在下面的示例中，background-size属性设置为cover。这将使图像完全适应整个宽度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {

            background-image: url("/css/images/orange-flower.jpg");
            height:400px;
            background-size: cover;
            color:white;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
</body>

</html>

设置背景重复

**background**属性的background-repeat组件确定背景图像的重复方式。在下面的示例中，使用了background-repeat属性，并将其值设置为repeat-y。图像沿垂直轴重复。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .first {
            padding: 30%;
            background-repeat: repeat-y;
            background-image: url("/css/images/logo.png");
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <p> Repeat along Y direction.</p>
    <div class="first">
    </div>

</body>

</html>

设置背景原点

**background**属性的background-origin组件确定背景的原点，即图像开始的位置。在下面的示例中，使用了background-repeat属性，并将其设置为content-box。图像从内容框的边缘开始。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Origin Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: url('/css/images/white-flower.jpg');
            background-origin: content-box;
            padding:20px;
            border: 10px dashed red;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div class="box"></div>
</body>

</html>

设置背景裁剪

**background**属性的background-clip组件确定背景图像的绘制区域。在下面的示例中，background-clip属性与content-box值一起使用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: url('/css/images/white-flower.jpg');
            background-clip: content-box;
            padding: 20px;
            border: 10px dashed grey;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div class="box"></div>
</body>

</html>

设置背景附件

**background**属性的background-attachment组件确定背景图像的滚动类型。在下面的示例中，background-attachment属性与fixed值一起使用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            height: 400px;
            background-image: url('/css/images/orange-flower.jpg');
            background-size:cover;
            background-attachment: fixed;
            color: white;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <p>This is a sample text. The image here is fixed.</p>
</body>

</html>

支持的浏览器

属性
background	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面