CSS的background属性用于设置元素的背景。它可用于应用单个背景图像或多个背景图像,以及定义背景颜色、大小、位置、重复行为和其他相关属性。
它是用于设计背景样式的多功能工具。元素的外观并为网页添加视觉趣味。
background是以下属性的简写:
background-clip:控制背景图像超出元素内边距或内容框的距离。
background-color:设置元素的背景颜色。
background-image:在元素上设置一个或多个背景图像。
background-origin:设置背景的原点。
background-position:设置每个图像在背景中的初始位置。
background-repeat:控制背景中图像的重复。
background-size:控制背景图片的大小。
概述
background 属性允许设置一层或多层背景,以逗号分隔。
每一层背景可能出现零次或至少一次以下值:
<attachment>
<bg-image>
<position>
<bg-size>
<repeat-style>
如果要添加 <bg-size>,则必须将其立即包含在<position> 之后,用"/"分隔。例如:"left/50%"。
<box> 的值可以包含零次、一次或两次。根据出现次数,设置以下值:
一次- 设置background-origin 和background-clip 的值。
两次 - 第一次设置background-origin的值,第二次设置background-clip的值。
background-color 的值可以包含在指定为背景的最后一层中。
可能的值
以下是后台简写属性可以具有的可能值:
<attachment>:指定背景,无论是固定的还是可滚动的。默认为滚动。
<box>:默认分别为 border-box 和 padding-box。
<background-color>:设置背景的颜色。默认为透明。
<bg-image>:设置一张或多张背景图像。默认为无。
<position>:设置背景的初始位置。默认值为 0% 0%。
<repeat-style>:控制背景中图像的重复。默认为重复。
<bg-size>:控制背景图像的大小。默认为自动。
语法
background = background-color | bg-image | bg-position / bg-size | repeat-style | attachment | box;
CSS background- 带图像和背景颜色
这里是设置使用简写属性background设置背景,其中指定图像和背景颜色:
<html>
<head>
<style>
body {
background: url('/css/images/scenery2.jpg') center/40% 50% no-repeat fixed padding-box content-box lightblue;
}
</style>
</head>
<body>
<h2>Background简写</h2>
</body>
</html>
CSS background: 图像重复
这里是使用简写属性background设置背景的示例,其中图像重复:
<html>
<head>
<style>
body {
background: url('/css/images/scenery2.jpg') repeat fixed padding-box content-box lightblue;
}
</style>
</head>
<body>
<h2 style="color: white;">Background简写 - background repeated</h2>
</body>
</html>
CSS background: 带背景颜色的图像
这里是使用简写属性background 设置背景的示例,其中添加了两个图像和一个背景颜色:
<html>
<head>
<style>
body {
background: url('/css/images/orange-flower.jpg') right bottom/30% 60% no-repeat,
url('/css/images/pink-flower.jpg') left top/30% 60% no-repeat lightgoldenrodyellow;
}
</style>
</head>
<body>
<h2 style="color: black; text-align: center;">Background简写 - 两个图片</h2>
</body>
</html>
CSS background相关属性
所有与背景相关的属性如下表所示:
属性 | 描述 |
---|---|
background | background相关属性的简写。 |
background-attachment | 指定背景相对于视口的位置,可以是固定的,也可以是可滚动。 |
background-clip | 控制背景图像延伸的距离元素的内边距或内容框。 |
background-color | 设置背景元素的颜色。 |
background-image | 设置一个或多个背景元素上的图像。 |
background-origin | 设置背景原点。 |
background-position | 设置背景的初始位置背景中的每个图像。 |
background-position-x | 设置背景中每个图像的初始水平位置。 |
background-position-y | 设置背景中每个图像的初始垂直位置。 |
background-repeat | 控制背景中图像的重复。 |
background-size | 控制背景图像的大小。 |
background-blend-mode | 确定元素的背景图像如何相互混合。 |