CSS 背景简写方式

2024-06-03 02:10| 来源: 网络整理| 查看: 265

CSS 背景简写 CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body { background-color: #ffffff; background-image: url("tree.png"); background-repeat: no-repeat; background-position: right top;}

您能够使用简写属性 background：

使用简写属性在一条声明中设置背景属性：

body { background: #ffffff url("/images/demo.png") no-repeat right top; margin-right: 200px;}background 属性

background 属性是在一条声明中指定所有背景属性的简写属性。

在这里，背景图像只显示一次，并位于右上角。

我们还添加了右外边距，以使文本不会覆盖背景图片。

运行一下

在使用简写属性时，属性值的顺序为：

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

所有 CSS 背景属性属性描述background在一条声明中设置所有背景属性的简写属性。background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。background-clip规定背景的绘制区域。background-color设置元素的背景色。background-image设置元素的背景图像。background-origin规定在何处放置背景图像。background-position设置背景图像的开始位置。background-repeat设置背景图像是否及如何重复。background-size规定背景图像的尺寸。

【本文地址】

公司简介

联系我们