国际访客建议访问 Primers 编程伙伴 国际服 以获得更好的体验。 快速访问 HTML 样式 背景

# CSS 的背景

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>
本文 更新于: 2025-06-05 19:13:12 创建于: 2025-06-05 19:13:12