CSS 中的 background
属性用于设置元素的背景,功能非常强大,可以控制背景颜色、背景图像、背景位置、大小、重复方式等。
你可以使用简写属性 background
,也可以分别使用以下子属性。
属性 | 描述 | 示例 |
---|---|---|
background-color |
背景颜色 | background-color: #f0f0f0; |
background-image |
背景图像 | background-image: url('bg.jpg'); |
background-repeat |
是否重复 | background-repeat: no-repeat; |
background-position |
背景图像的位置 | background-position: center top; |
background-size |
背景图像大小 | background-size: cover; |
background-attachment |
是否随滚动 | background-attachment: fixed; |
background-origin |
背景图像定位区域 | background-origin: padding-box; |
background-clip |
背景绘制区域 | background-clip: content-box; |
示例:
<!-- 背景图片 -->
<div style="background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
<!-- 背景图片,居中 -->
<div style="background-position:center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
<!-- 背景图片,居中,不重复 -->
<div style="background-repeat: no-repeat; background-position:center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
<!-- 背景图片,居中,不重复,拉伸 -->
<div style="background-size: cover; background-repeat: no-repeat; background-position:center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>