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

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

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

可以同时使用颜色和图像作为元素的背景。

您设置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;

没有办法将背景图像专门限制为仅覆盖元素的一部分，因此您必须确保图像小于元素，或者它具有任何透明区域，以使背景色可见。

要着色图像，可以使用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/zh-CN/docs/Web/Guide/CSS/Using_multiple_backgrounds

用于构建渐变的工具：

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

注意-在IE11中不起作用！确定原因后，我将发布更新。

用

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

为了增加这个答案，请确保图像本身具有透明背景。

这是一起使用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像这样设置属性：

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

注意后面的逗号和颜色代码no-repeat；这将设置您想要的背景颜色。

我是在此YouTube视频中发现此问题的，但是无论如何我都不隶属于该频道或视频。

使图像的一半透明，以便透过它看到背景色。

否则，只需添加另一个div即可占据容器div的50％，然后向左或向右浮动它。然后将图像或颜色应用于图像。

壁虎有一个怪异的错误，即使为有效的元素具有更大的z索引，background-color为html选择器设置也会掩盖background-imagebody元素的，并且您应该能够看到body 以及bodybackground-imagehtml background-color完全基于简单的逻辑。

壁虎虫

避免以下情况...

html {background-color: #fff;}
body {background-image: url(example.png);}

变通

body {background-color: #fff; background-image: url(example.png);}

大家好，我尝试了另一种将背景图像和背景颜色结合在一起的方法：

的HTML

<article><canvas id="color"></canvas></article>

的CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

请让我知道它是否对您有用

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;