CSS：背景颜色的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8195215/
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
CSS: background image on background color
提问by mkn
I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.pngimage) to that panel, which indicates that the selected panel has been already selected before.
如果选择了这个面板（点击它），我有一个面板，我把它涂成蓝色。此外，我.png向该面板添加了一个小符号（图像），表示之前已经选择了所选面板。
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
因此，如果用户看到例如 10 个面板，其中 4 个有这个小标志，他就知道他之前已经点击了这些面板。到目前为止，这项工作很好。现在的问题是我无法同时显示小标志并使面板变为蓝色。
I set the panel to blue with the css background: #6DB3F2;and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
我使用 css 将面板设置为蓝色，background: #6DB3F2;使用background-image: url('images/checked.png'). 但似乎背景颜色在图像上方，因此您看不到标志。
Is it therefore possible to set z-indexes for the background color and the background image?
因此是否可以z-index为背景颜色和背景图像设置es？
回答by dodger
You need to use the full property name for each:
您需要为每个使用完整的属性名称：
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
或者，您可以使用背景速记并在一行中指定所有内容：
background: #6DB3F2 url('images/checked.png');
回答by Francisc Aknai
For me this solution didn't work out:
对我来说，这个解决方案没有奏效：
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
但相反，它以另一种方式工作：
<div class="block">
<span>
...
</span>
</div>
the css:
css：
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
回答by Risa__B
And if you want Generate a Black Shadow in the background, you can use the following:
如果你想在后台生成一个黑色阴影，你可以使用以下命令：
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
回答by Luki B. Subekti
Based on MDN Web Docsyou can set multiple background using shorthand backgroundproperty or individual properties except for background-color. In your case, you can do a trick using linear-gradientlike this:
基于MDN Web Docs，您可以使用速记background属性或单个属性设置多个背景，除了background-color. 在你的情况下，你可以使用linear-gradient这样的技巧：
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
参数中的第一项（图像）将放在最上面。第二个项目（彩色背景）将放在第一个项目下方。您还可以单独设置其他属性。例如，设置图像大小和位置。
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
这种方法的好处是你可以很容易地在其他情况下实现它，例如，你想让蓝色覆盖具有一定不透明度的图像。
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
分别设置各个属性参数。因为图像是放在颜色叠加层下面，所以它的属性参数也放在颜色叠加层参数后面。
回答by Kesar Sisodiya
You can also use short trick to use image and color both like this :-
您还可以使用简短的技巧来使用图像和颜色，如下所示：-
body {
background:#000 url('images/checked.png');
}
回答by Ramzi Khahil
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
真的很有趣的问题，还没有看到它。这段代码对我来说很好用。在 chrome 和 IE9 中测试过
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
回答by Da Beginer
Here is how I styled my colored buttons with an icon in the background
这是我在背景中使用图标设计彩色按钮的样式
I used "background-color" property for the color and "background" property for the image.
我使用“背景颜色”属性作为图像的颜色和“背景”属性。
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
回答by Fernán García de Zú?iga
This actually works for me:
这实际上对我有用：
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
您还可以添加实心阴影并设置背景图像：
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
如果第一个选项由于某种原因不起作用，并且您不想使用框阴影，则可以始终为图像使用伪元素，而无需任何额外的 HTML：
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
回答by alpc
<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>
<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>
Other Sample Box Center Image and Background Color
其他示例框中心图像和背景颜色
1.First clearpixel fix image area 2.style center image area box 3.li background or div color style
1.首先clearpixel固定图像区域2.style中心图像区域框3.li背景或div颜色样式
回答by Vikash pathak
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
