为什么不能同时使用背景图像和颜色呢?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (29)

我所试图做的是同时显示background-colorbackground-image,所以我的一半div将覆盖右阴影背景图像和其他左侧部分将覆盖背景色。

但是当我使用时background-image,颜色消失。

提问于
用户回答回答于

使用颜色和图像作为元素的背景是完全可能的。

你设置background-colorbackground-image样式。如果图片小于元素,则需要使用background-position样式将其放在右侧,并避免重复并覆盖使用background-repeat样式的整个背景:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

或者使用复合风格background

background: green url(images/shadow.gif) right no-repeat;

如果你使用复合样式background分别设置两者,则只会使用最后一个样式,这是您的颜色不可见的一个可能原因:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

无法专门限制背景图像以仅覆盖元素的一部分,因此你必须确保图像小于元素或具有任何透明区域,以使背景颜色可见。

用户回答回答于

使用

background:red url(../images/samle.jpg) no-repeat left top;

扫码关注云+社区