css的背景background属性

news2024/12/26 14:02:56

CSS的background属性是一个简写属性，它允许你同时设置元素的多个背景相关的子属性。使用这个属性可以简化代码，使其更加清晰和易于维护。background属性可以设置不同的子属性。

background子属性

定义背景颜色

使用background-color属性

格式：background-color：#ff0000; /* 蓝色 */

也可以直接用background属性

格式：background：#ff0000; /* 蓝色 */

两种方式写出来的效果是一样的。

属性值可以是颜色名、十六进制值、RGB、RGBA、HSL、HSLA或其他CSS颜色值。

定义背景图像

使用background-image属性

格式：background-image：url('background-image.jpg');

属性值可以是URL路径、线性渐变、径向渐变等。

定义背景图像的重复方式

使用background-repeat属性

格式：background-repeat：no-repeat;

属性值：

repeat：背景图像在垂直和水平方向上重复。

repeat-x：背景图像只在水平方向上重复。

repeat-y：背景图像只在垂直方向上重复。

no-repeat：背景图像不重复。

定义背景图像的位置

使用background-position属性

格式：background-position：center;

属性值可以是关键词（如top、bottom、left、right、center）或长度值，或两者的组合，常用的就是center。

定义背景图像的尺寸（CSS3）

使用background-size属性

格式：background-size：cover;

属性值：

长度值或者百分比

cover：覆盖整个元素区域

contain：完全包含在元素内

定义背景图像是否固定或者随着页面滚动（CSS3）

使用background-attachment属性

格式：background-attachment：fixed;

属性值：

scroll：背景图像随着页面滚动。

fixed：背景图像固定，页面滚动时不动。

local：背景图像随着元素的内容滚动。

定义背景的绘制区域（CSS3）

使用background-clip属性

background-clip控制的是背景的可见区域，即背景绘制到哪里停止。

格式：background-clip：border-box;

属性值：

border-box：背景延伸到边框内侧边缘。

padding-box：背景延伸到内边距内侧边缘，不包括边框。

content-box：背景仅延伸到内容区域，不包括内边距和边框。

text：背景将剪切并贴合文本，这是比较新的属性值，可能不是所有浏览器都支持。

定义背景定位的起始位置（CSS3）

使用background-origin属性

background-origin控制的是背景的定位起点，即从哪里开始定位背景。

格式：background-origin：content-box;

属性值：

border-box：背景定位相对于边框盒。

padding-box：背景定位相对于内边距盒，这是默认值。

content-box：背景定位相对于内容盒。

background属性

background 是一个复合属性，它允许你一次性设置多个与背景相关的样式。
使用background简写属性可以一次性设置多个背景属性，但如果需要设置的属性不全，也可以只设置其中的一部分。如果某个子属性未被设置，它将使用其默认值。

复合属性的优点：

简化代码：使用一个属性设置多个背景样式，代码更简洁。
易于维护：更新背景样式时，只需要修改一个地方。
兼容性：如果某个浏览器不支持某个子属性，整个复合属性仍然可以正常工作。

注意事项：

如果要设置的所有子属性都需要定义，可以使用复合属性。

如果只需要设置部分子属性，建议单独设置，以避免不必要的复杂性。

使用 background 复合属性可以提高CSS的编写效率，但需要确保按照正确的顺序设置各个子属性。

示例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ display: flex; flex-wrap: wrap; }
        div{
            width: 100px;
            height: 100px;
            text-align: center;  /* 文本居中 */
            border: 1px solid #000;  /* 边框线 为了标记每个div盒子 */
        }
        .p1{
            background-color: #0000ff;  /* 背景色 */
        }
        .p2{
            background: #ff0000;  /* 背景色 */
        }
        .p3{
            background-image: url('https://img2.baidu.com/it/u=2086713274,1063413959&fm=253');  /* 背景图 */
            background-position: center;  /* 背景定位 中心 */
            background-repeat: no-repeat;  /* 背景图是否重复平铺 不重复 */
            background-size: cover;  /* 背景图尺寸 铺满 */
        }
        .p4{
            background: url('https://img2.baidu.com/it/u=2086713274,1063413959&fm=253') no-repeat center;
            background-size: cover;  /* background不支持cover属性 单独书写 */
        }
    </style>
</head>
<body>
    <div class="p1">文本1</div>
    <div class="p2">文本2</div>
    <div class="p3">文本3</div>
    <div class="p4">文本4</div>
</body>
</html>

效果图：