当我们在 HTML 中设置背景时,可以使用 background
属性。这个属性有多个值,可以使用不同的值来设置背景图片、背景颜色、背景位置、背景重复等等。以下是用表格列出的常见的 background
属性的值及其作用:
属性值 | 描述 |
---|---|
background-color | 设置背景颜色。可以使用颜色名称、十六进制值、RGB 值或者 HSL 值。 |
background-image | 设置背景图片。可以使用图片的 URL 地址或者使用 url() 函数引入图片。 |
background-repeat | 设置背景图片的重复方式。可以使用 repeat (默认值,图片在水平和垂直方向均重复)、repeat-x (图片在水平方向重复)、repeat-y (图片在垂直方向重复)或者 no-repeat (图片不重复) |
background-position | 设置背景图片的位置。可以使用关键词(如 left 、center 、right 、top 、center 、bottom )或者具体的位置值(如 50px 30px )来指定。 |
background-attachment | 设置背景图片的滚动方式。可以使用 scroll (默认值,背景图片会随页面滚动)、fixed (背景图片固定不动)或者 local (背景图片会在元素内滚动,元素的内容会穿过背景)。 |
background-size | 设置背景图片的大小。可以使用具体的大小值(像素值、百分比等等),也可以使用关键词(如 cover 、contain )来指定。cover 会让图片铺满整个背景,但是可能会被裁剪;contain 会让整个图片都显示在背景中,但是可能会留下空白。 |
背景透明 | background:rgba(0,0,0,0.1);必须是四个参数 |
注意:当使用 background
属性设置多个值时,各个值之间需要用空格隔开。例如:background: url('example.jpg') no-repeat center center fixed;