CSS 为什么我不能同时使用背景图像和颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/903659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why can't I use background image and color together?
提问by Yasir
What I am trying to do is to show both background-colorand background-image, so that half of my divwill cover the right shadow background image, and the other left part will cover the background color.
我想要做的是同时显示background-color和background-image，这样我的一半div将覆盖右侧阴影背景图像，另一部分将覆盖背景颜色。
But when I use background-image, the color disappears.
但是当我使用时background-image，颜色消失了。
回答by Guffa
It's perfectly possible to use both a color and an image as background for an element.
完全可以同时使用颜色和图像作为元素的背景。
You set the background-colorand background-imagestyles. If the image is smaller than the element, you need to use the background-positionstyle to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeatstyle:
您设置background-color和background-image样式。如果图像小于元素，则需要使用background-position样式将其放置在右侧，并使用样式防止其重复并覆盖整个背景background-repeat：
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
Or using the composite style background:
或者使用复合样式background：
background: green url(images/shadow.gif) right no-repeat;
If you use the composite style backgroundto set both separately, only the last one will be used, that's one possible reason why your color is not visible:
如果您使用复合样式background分别设置两者，则只会使用最后一个，这可能是您的颜色不可见的原因之一：
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.
没有办法专门限制背景图像仅覆盖元素的一部分，因此您必须确保图像小于元素，或者它有任何透明区域，以便背景颜色可见。
回答by Luke Puplett
To tint an image, you can use CSS3 backgroundto stack images and a linear-gradient. In the example below, I use a linear-gradientwith no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.
要给图像着色，您可以使用 CSS3background来堆叠图像和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;
Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.
如果您有 png，将产生浅蓝色的方格纸。请注意，堆叠顺序可能与您的心智模型相反，第一个项目在顶部。
Excellent documentation by Mozilla, here:
Mozilla 的优秀文档，在这里：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
Tool for building the gradients:
构建渐变的工具：
http://www.colorzilla.com/gradient-editor/
http://www.colorzilla.com/gradient-editor/
Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.
注意 - 不适用于 IE11！当我找出原因时，我会发布更新，因为它应该。
回答by Christophe Eblé
use
用
background:red url(../images/samle.jpg) no-repeat left top;
回答by Itay Moav -Malimovka
回答by mpen
Here's an example of using background-imageand background-colortogether:
下面是一个使用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>回答by Filnor
Actually there is a way you can use a background color with a background image. In this case, the background part will be filled with that specified color instead of a white/transparent one.
实际上有一种方法可以将背景颜色与背景图像一起使用。在这种情况下，背景部分将填充指定的颜色而不是白色/透明颜色。
In order to achieve that, you need to set the backgroundproperty like this:
为了实现这一点，您需要background像这样设置属性：
.bg-image-with-color {
background: url("example.png") no-repeat, #ff0000;
}
Note the comma and the color code after no-repeat; this sets the background color you wish.
注意逗号和后面的颜色代码no-repeat; 这会设置您想要的背景颜色。
I discovered this in this YouTube video, however I'm not affiliated with that channel or video in any means.
我在这个 YouTube 视频中发现了这一点，但是我与该频道或视频没有任何关联。
回答by adragom
Hello everyone I tried another way to combine background-image and background-color together:
大家好，我尝试了另一种将 background-image 和 background-color 组合在一起的方法：
HTML
HTML
<article><canvas id="color"></canvas></article>
CSS
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();
}
Please let me know if it worked for you Thanks
请让我知道它是否对你有用 谢谢
回答by mr-euro
Make half of the image transparent so the background colour is seen through it.
使图像的一半透明，以便通过它看到背景颜色。
Else simply add another div taking up 50% up the container div and float it either left or right. Then apply either the image or the colour to it.
否则只需添加另一个 div 占据容器 div 的 50% 并将其向左或向右浮动。然后应用图像或颜色。
回答by John
Gecko has a weird bug where setting the background-colorfor the htmlselector will cover up the background-imageof the body element even though the bodyelement in effecthas a greater z-index and you shouldbe able to see the body's background-imagealong with the htmlbackground-colorbased purely on simple logic.
Gecko 有一个奇怪的错误，即设置background-colorforhtml选择器会覆盖background-imagebody 元素，即使该body元素实际上具有更大的 z-index，并且您应该能够看到 bodybackground-image以及htmlbackground-color纯粹基于简单逻辑的 。
Gecko Bug
壁虎虫
Avoid the following...
避免以下...
html {background-color: #fff;}
body {background-image: url(example.png);}
Work Around
解决
body {background-color: #fff; background-image: url(example.png);}
回答by Mohammed El-Barbeer
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;
