在css中如何设置背景图片与背景颜色

使用background-color设置背景色，如#f0f0f0；2. 用background-image添加图片并可设no-repeat；3. 通过background简写属性同时设置颜色、图片、位置等；4. 配合background-size、position、attachment等控制显示效果，提升页面视觉层次与兼容性。

在CSS中设置背景图片与背景颜色，可以通过 background 或更具体的 background-image 和 background-color 属性来实现。你可以单独设置，也可以组合使用。

1. 单独设置背景颜色

background-color: #f0f0f0;

常用值包括十六进制（如 #ff0000）、RGB（如 rgb(255, 0, 0)）、颜色名称（如 red）等。

2. 单独设置背景图片

background-image: url('bg.jpg');

立即学习“前端免费学习笔记（深入）”；

如果不需要背景图重复，可以加上：

background-repeat: no-repeat;

3. 同时设置背景图片和背景颜色

直接使用 background 简写属性：

一键抠图

在线一键抠图换背景

30

查看详情

background: #e0e0e0 url('bg.png') no-repeat center center;

这段代码设置了：

• 背景颜色为 #e0e0e0
• 背景图片来自 bg.png
• 图片不重复
• 居中对齐并铺满容器（可通过 background-size 调整）

4. 控制背景图的显示效果

background-size: cover; —— 图片覆盖整个容器，保持比例

background-size: 100% 100%; —— 拉伸填满（可能变形）

background-position: center; —— 定位图片位置

background-attachment: fixed; —— 背景固定，滚动时图片不动（常用于视差效果）

基本上就这些。合理搭配背景颜色和图片，能增强页面层次感，同时保证在图片未加载时也有良好显示效果。

以上就是在css中如何设置背景图片与背景颜色的详细内容，更多请关注php中文网其它相关文章！