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 从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 背景属性示例

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

设置背景颜色

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

示例

Open Compiler
<!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属性用于将背景图片设置为花朵。

示例

Open Compiler
<!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属性用于将背景位置设置为居中。

示例

Open Compiler
<!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。这将使图像完全适应整个宽度。

示例

Open Compiler
<!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。图像沿垂直轴重复。

示例

Open Compiler
<!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。图像从内容框的边缘开始。

示例

Open Compiler
<!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值一起使用。

示例

Open Compiler
<!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值一起使用。

示例

Open Compiler
<!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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
background 1.0 4.0 1.0 1.0 3.5
css_properties_reference.htm
广告