css背景图片和背景颜色一起显示

作者：暗夜骑士发布日期:2025-12-10 浏览:42

/* 定义一个容器 */
.container {
  width: 300px;
  height: 200px;
  /* 设置背景图片 */
  background-image: url('your-image-url.jpg');
  /* 设置背景颜色，当图片加载失败或图片透明部分会显示此颜色 */
  background-color: #ffcc00;
  /* 确保背景图片平铺和定位 */
  background-repeat: no-repeat;
  background-position: center;
}

解释说明：

background-image: 用于设置背景图片的路径。
background-color: 用于设置背景颜色。当背景图片加载失败或者图片有透明部分时，背景颜色会显示出来。
background-repeat: 控制背景图片是否重复。no-repeat 表示不重复。
background-position: 控制背景图片的位置。center 表示将图片居中显示。

你可以根据需要调整这些属性以适应你的设计需求。

下一篇：css translate3d