背景属性CSS中的background属性大全，打造网页视觉设计风采！

2023-09-24 06:19:37

在UI开发中，你是否经常被CSS属性中的background搞得晕头转向，不知道如何使用？别担心，这篇文章将带你一探究竟，让你彻底搞懂CSS的background属性，助你打造美轮美奂的网页视觉设计！

CSS background属性是一组用于和控制网页元素背景的属性集合，包括背景颜色、背景图片、背景位置、背景重复方式、背景大小、背景附加物等。

background: color position/size image repeat attachment;

background-color: value;

background-color 属性用于设置元素的背景颜色，可使用颜色名称、16进制颜色值、RGB颜色值、RGBA颜色值等。

background-image: value;

background-image 属性用于设置元素的背景图片，可使用图片的URL或其它图像资源的引用。

background-repeat: value;

background-repeat 属性用于设置背景图片的重复方式，可取值有：

background-position: value;

background-position 属性用于设置背景图片的位置，可使用百分比、像素值、等。

background-size: value;

background-size 属性用于设置背景图片的大小，可使用百分比、像素值、关键字等。

background-attachment: value;

background-attachment 属性用于设置背景图片的固定方式，可取值有：

background-clip: value;

background-clip 属性用于设置背景裁剪的方式，可取值有：

background-origin: value;

background-origin 属性用于设置背景定位的原点，可取值有：

现在，让我们逐个分析background属性中有关背景的子属性，这些子属性相互结合，能帮助我们更为详细的描述和控制网页元素的背景：

background-attachment：顾名思义，该属性用于定义背景图片是否固定在屏幕上，或者跟随元素一起滚动。该属性可以取值scroll或fixed。
background-clip：该属性则用来控制背景图片与元素内容之间的裁剪关系。裁剪方式一般可分为content-box(裁剪到元素的border内)，padding-box(裁剪到元素的padding内)，border-box(裁剪到元素的margin内)三种。
background-color：此属性用于设置元素的背景颜色，可以在CSS中以name、hex、rgb和rgba颜色值的形式定义。
background-image：此属性允许为元素设置一张或多张背景图片，语法结构遵循URL(image file path)。
background-origin：该属性决定了背景图片定位的相对原点。同样也分为border-box、padding-box、content-box三个值。
background-position：该属性的用途是定义背景图片相对于元素的初始位置。其位置可以通过px、em、百分比或关键字进行定义。
background-repeat：该属性用于定义背景图片在指定区域内重复出现的频率。背景图片的重复方式可由repeat（在X轴与Y轴皆重复）、no-repeat（不重复）、repeat-x（仅在X轴重复）、repeat-y（仅在Y轴重复）来指定。
background-size：该属性为我们提供了指定背景图片尺寸的能力。其值的设定通常以“width height”的形式，也可以以百分比的形式来设定其值。