background-color属性

该属性设置元素的背景颜色。

颜色值有三种：

color值
transparent透明，为默认的值。
inherit，继承父元素的color。

颜色值有三种表示方式：

颜色名，如：红色。
RGB，如：rgb(255,0,255),注：数值范围为0~255。
十六进制，如：#00ff00。

<!DOCTYPE html>
<html>

<head>
    <title>背景属性</title>
    <style>
        body {
            background-color: rgb(255, 0, 255);
        }

        h1 {
            background-color: red;
        }

        p {
            background-color: #00ff00;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <p>这是文本内容</p>
</body>

</html>

效果如下：

元素的背景是元素的总大小，包括填充（padding）和边界（但不包括边距margin）。

当我们为元素设置padding、border和margin属性时，背景颜色会渲染到padding,而不会渲染到border和margin。

以下以h1为例：

<!DOCTYPE html>
<html>

<head>
    <title>背景属性</title>
    <style>
        body {
            background-color: rgb(255, 0, 255);
        }

        h1 {
            margin: 20px;
            /* 颜色不会渲染到margin里 */
            border: 10px solid;
            /* 这是不为边框设置颜色，看效果颜色不会渲染到border里 */
            padding: 10px;
            /* 元素的大小包括了填充，所以，颜色会渲染到padding里 */
            background-color: red;
        }

        p {
            background-color: #00ff00;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <p>这是文本内容</p>
</body>

</html>

效果如下：

background-image、background-repeat、background-size属性

background-image属性设置一个HTML元素的背景图片，元素的背景是元素的总大小，包括填充（padding）和边界（但不包括边距margin）。默认情况下，图片会在垂直和水平方向重复显示。

写法：background-image: url('url');

background-repeat属性定义图片是否在垂直和水平方向上重复显示。

写法：background-repeat: repeat-y||repeat-x||no-repeat; 分别表示在垂直方向上重复、在水平方向上重复、不重复显示。

background-size属性定义背景图片的大小。

写法：background-size: 10px 10px; 分别表示宽、高，若只写一个值，表示宽、高为一个值。

没有规定background-repeat属性时，如下：

<!DOCTYPE html>

<html>

<head>
    <title>背景属性</title>
    <style>
        body {
            background-color: rgb(255, 0, 255);
        }

        h1 {
            height: 120px;
            background-image: url('D:\\Downloads\\sc.png');
            background-size: 100px, 60px;
            color: #ccc;
        }

        p {
            background-color: #00ff00;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <p>这是文本内容</p>
</body>

</html>

效果：

如上，因为没有规定background-repeat属性，默认在水平和垂直方向都重复显示背景图片。

若我们规定背景图片只在水平方向重复显示，如下：

<!DOCTYPE html>

<html>

<head>
    <title>背景属性</title>
    <style>
        body {
            background-color: rgb(255, 0, 255);
        }

        h1 {
            height: 120px;
            background-image: url('D:\\Downloads\\sc.png');
            /* background-size: 100px ,60px; */
            background-repeat: repeat-x;
            /* 规定只在水平方向上重复显示图片 */
            color: #ccc;
        }

        p {
            background-color: #00ff00;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <p>这是文本内容</p>
</body>

</html>

效果如下：

当然，也可以不重复显示背景图片，如下：

h1 {
height: 120px;
background-image: url('pho.jpg');
background-size: 100px 60px;
background-repeat: no-repeat; /* 不重复显示 */
color: #ccc;
}

效果：

以上，在水平和垂直方向均没有重复显示背景图片，因此只有一张图片。

background-position属性

该属性定义背景图片的定位位置，注：定位是以在定位区域（clip）内的左上角(0% 0%)为起始点的。

写法：background-position: x% y%||x y||left top;

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style>
body {
background-image: url('pho.jpg');
background-size: 100px 60px;
background-repeat: no-repeat;
background-position: 50px 50px; /* 以左上角为起始点 */
}
</style>
</head>
<body>
</body>
</html>

效果：

background-origin属性

该属性规定了background-position的相对位置，即在什么范围内定位。

属性值有：

border-box 背景图片在边框的相对位置，即在边框即以内定位。
padding-box 背景图片在填充框的相对位置，即在内边框即以内定位，默认值。
content-box 背景图片在内容框的相对位置，即在内容框即以内定位。

若没有规定该属性，则以padding-box定位。

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style>
div {
margin: 10px;
border: 10px solid red;
padding: 20px;
background-image: url('1.gif');
background-repeat: no-repeat;
background-size: 60px 50px;
background-position: left;
}
#div1 {
background-origin: border-box; /* 以边框即以内为相对位置定位 */
}
#div2 {
background-origin: padding-box; /* 以填充框即以内为相对位置定位 */
}
#div3 {
background-origin: content-box; /* 以内容区域即以内为相对位置定位 */
}
</style>
</head>
<body>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div id="div3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>

效果如下：

background-attachment属性

该属性规定背景图片是否固定或者随页面的部分内容滚动。

属性值有：

scroll--随页面的部分内容滚动，此值为默认值。
fixed--图片固定在position定位的位置上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style>
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>
</html>

效果如下：

background-clip属性

该属性规定背景图像绘画的区域。通俗点说背景图像在什么范围即以内显示。

属性值：

border-box 图像在边框即以内绘制
padding-box 图像在填充框即以内绘制
content-box 图像在内容区域即以内绘制

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style>
div {
margin: 10px;
border: 10px dotted red;
padding: 20px;
background-color: blue;
}
#div1 {
background-clip: border-box; /* 在边框即以内绘制图片 */
}
#div2 {
background-clip: padding-box; /* 在填充框即以内绘制图片 */
}
#div3 {
background-clip: content-box; /* 在内容区域即以内绘制图片 */
}
</style>
</head>
<body>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div id="div3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>

效果如下：

背景属性缩写形式

在一个声明中写所有的属性：

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

CSS学习——背景属性

background-position属性

background-attachment属性

背景属性缩写形式

猜你喜欢