为什么我不能一起使用背景图像和颜色？ [英] Why can't I use background image and color together?

问题描述

我想要做的是显示 background-color 和 background-image div 将覆盖右侧阴影背景图片，左侧部分将覆盖背景颜色。

What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color.

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

But when I use background-image, the color disappears.

推荐答案

您可以设置 background-color 和 background-image 样式。如果图片小于元素，您需要使用 background-position 样式将其放置在右侧，并防止其重复并覆盖整个背景使用 background-repeat 样式：

You set the background-color and background-image styles. If the image is smaller than the element, you need to use the background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeat style:

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 单独设置，仅使用最后一个，这是您的颜色不可见的一个可能原因：

If you use the composite style background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:

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

没有办法特别限制背景图片只覆盖部分元素，以确保图像小于元素，或者它具有任何透明区域，以使背景颜色可见。

There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.

这篇关于为什么我不能一起使用背景图像和颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！