为什么我不能同时使用背景图片和颜色？

Question

我想要做的是同时显示background-color和background-image，这样我的div的一半将覆盖右边的阴影背景图像，而另一部分将覆盖背景颜色。

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

Answer 1

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

您可以设置background-color和background-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;

没有办法特别限制背景图像只覆盖元素的一部分，因此您必须确保图像比元素小，或者它有任何透明区域，以便背景颜色可见。

Answer 2

要对图像进行染色，可以使用CSS3 background堆叠图像和linear-gradient。在下面的例子中，我使用了一个没有实际渐变的linear-gradient。浏览器将渐变视为图像(我认为它实际上生成了一个位图并将其覆盖)，因此，实际上是在堆叠多个图像。

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

如果你有png，将会产生一个浅蓝色的图表纸。请注意，堆叠顺序可能与您的心理模型相反，第一个项目在顶部。

Mozilla的优秀文档，请访问：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

用于构建渐变的工具：

http://www.colorzilla.com/gradient-editor/

注意--在IE11中不起作用！当我发现原因时，我会更新的，因为这是应该的。

Answer 3

使用

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