CSS背景background属性整理
迪丽瓦拉
2024-05-29 11:49:35
0

1.background-color

background-color属性:设置元素的背景颜色

2.background-position

background-position属性:设置背景图像的起始位置,需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

常用属性:

  • top
  • left
  • bottom
  • right

3.background-size

background-size属性:设置背景图像的尺寸

常用属性:

px:参数1是宽,参数二是高

cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。可能导致部分无法显示

contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

4. background-repeat

background-repeat属性:定义了图像的平铺模式

常用属性:

repeat:默认。背景图像将在垂直方向和水平方向重复。

repeat-x:背景图像将在水平方向重复。

repeat-y:背景图像将在垂直方向重复。

no-repeat:背景图像将仅显示一次。

5. background-origin

background-origin属性:规定 background-position 属性相对于什么位置来定位。

常用属性:

padding-box:背景图像相对于内边距框来定位。

border-box:背景图像相对于边框盒来定位。

content-box:背景图像相对于内容框来定位

6.background-clip

background-clip属性:规定背景的绘制区域

常用属性:

border-box:背景被裁剪到边框盒。

padding-box:背景被裁剪到内边距框。

content-box:背景被裁剪到内容框。

7.background-attachment

background-attachment属性:设置背景图像是否固定或者随着页面的其余部分滚动。

常用属性:

scroll:默认值。背景图像会随着页面其余部分的滚动而移动。

fixed:当页面的其余部分滚动时,背景图像不移动。

8.background-image

background-image属性:为元素设置背景图像。

常用属性:

url('URL')   指向图像的路径。

9.background属性:

background属性:在一个声明中设置所有背景属性

例子:background: #00FF00 url(bgimage.gif) no-repeat fixed top;

属性说明:

  • background-color         设置元素的背景颜色
  • background-position     设置背景图像的起始位置
  • background-size     设置背景图像的尺寸
  • background-repeat    定义了图像的平铺模式
  • background-origin     规定 background-position 属性相对于什么位置来定位。
  • background-clip    规定背景的绘制区域
  • background-attachment    设置背景图像是否固定或者随着页面的其余部分滚动。
  • background-image    为元素设置背景图像。

相关内容