CSS - background 属性_CSS 菜鸟教程

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 属性的 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 属性用于将背景大小设置为封面。这将使图像完全适合整个宽度。

<!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 属性，并为其指定了 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 属性已与内容框值一起使用。

<!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 属性已与固定值一起使用。

<!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 - backface-visibility 属性 CSS - background-attachment 属性 >>