为什么我不能一起使用背景图像和颜色？
我想要做的是同时显示background-color和background-image ，这样我的div一半将覆盖正确的阴影背景图像，另一个左侧部分将覆盖背景颜色。
但是当我使用background-image ，颜色消失了。
使用颜色和图像作为元素的背景是完全可能的。
您设置background-color和background-image样式。 如果图像小于元素，则需要使用background-position样式将其放在右侧，并使其不会重复，并覆盖整个使用background-repeat样式的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(..http://img.dovov.comsamle.jpg) no-repeat left top;
要为图像着色，可以使用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
build立梯度的工具：
http://www.colorzilla.com/gradient-editor/
注意 – 在IE11中不起作用！ 我会发现一个更新，当我find原因，因为它应该。
并添加到这个答案，确保图像本身有一个透明的背景。
使图像的一半透明，以便通过它看到背景颜色。
否则只需添加另一个div，占用容器div的50％，然后向左或向右移动。 然后应用图像或颜色。
壁虎有一个奇怪的错误，其中设置htmlselect器的background-color将掩盖身体元素的background-image ，即使body元素有一个更大的Z – 索引，你应该能够看到身体的background-image以及纯粹基于简单逻辑的html background-color 。
壁虎臭虫
避免以下…
html {background-color: #fff;} body {background-image: url(example.png);}
工作
body {background-color: #fff; background-image: url(example.png);}
下面是一个使用background-image和background-color的例子：
.box { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px); width: 100px; height: 100px; margin: 10px 0 0 10px; display: inline-block; }
<div class="box" style="background-color:orange"></div> <div class="box" style="background-color:green"></div> <div class="box" style="background-color:blue"></div>
background:url(directoryName/imageName.extention) bottom left no-repeat; background-color: red;
