CSS：背景颜色的背景图像
如果正在选择此面板（单击它），我有一个面板，我将其涂成蓝色。此外，我在该面板中添加了一个小符号（.png 图像），表示所选面板之前已被选中。
因此，如果用户看到例如 10 个面板，其中 4 个有这个小标志，他就知道他之前已经点击过这些面板。到目前为止，这项工作很好。现在的问题是我无法同时显示小标志并使面板变为蓝色。
我使用 css background: #6DB3F2; 将面板设置为蓝色，使用 background-image: url('images/checked.png') 将背景图像设置为。但似乎背景颜色在图像上方，因此您看不到标志。
因此，是否可以为背景颜色和背景图像设置 z-indexes？
您需要为每个使用完整的属性名称：
background-color: #6DB3F2;
background-image: url('images/checked.png');
或者，您可以使用背景速记并将其全部指定在一行中：
background: url('images/checked.png'), #6DB3F2;
对我来说，这个解决方案没有奏效：
background-color: #6DB3F2;
background-image: url('images/checked.png');
但相反，它以另一种方式工作：
<div class="block">
<span>
...
</span>
</div>
的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%;
}
如果您想在背景中生成黑色阴影，您可以使用以下内容：
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
基于 MDN Web Docs，您可以使用速记 background 属性或除 background-color 之外的单个属性设置多个背景。在您的情况下，您可以像这样使用 linear-gradient 做一个技巧：
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
参数中的第一项（图像）将被放在顶部。第二个项目（彩色背景）将放在第一个项目的下方。您还可以单独设置其他属性。例如，设置图像大小和位置。
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
这种方法的好处是您可以轻松地在其他情况下实现它，例如，您想让蓝色覆盖具有一定不透明度的图像。
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;
分别设置各个属性参数。因为图像放在颜色叠加层下面，所以它的属性参数也放在颜色叠加层参数之后。
您也可以像这样使用小技巧来使用图像和颜色：-
body {
background:#000 url('images/checked.png');
}
<div style="background: red url('FILE.jpg')">。如果最后放置红色，它也会闪烁红色。
很有意思的问题，还没看。这段代码对我来说很好。在 chrome 和 IE9 中对其进行了测试
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
也可以使用下一个语法。
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
它允许您组合 background-color、background-image、background-position 和 background-repeat 属性。
例子
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
这实际上对我有用：
background-color: #6DB3F2;
background-image: url('images/checked.png');
您还可以放置一个实心阴影并设置背景图像：
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
如果第一个选项由于某种原因不起作用并且您不想使用框阴影，您可以随时为图像使用伪元素，而无需任何额外的 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');
}
这是我如何在背景中使用图标设置彩色按钮的样式
我使用“背景颜色”属性作为颜色，使用“背景”属性作为图像。
<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>
假设您想要右侧（或左侧）的图标，那么这应该是最好的：
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
您也可以执行 background-size: contain;，但这应该大体相同。 background-position 将取决于您的图像。
然后您可以轻松地在悬停时执行替代状态：
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
background-color: #6DB3F2;
background-image: url('images/checked.png');
这应该改变背景图像的颜色
<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>
其他示例框中心图像和背景颜色
1.First clearpixel 固定图像区域 2.style 中心图像区域框 3.li 背景或 div 颜色样式
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
关注公众号
不定期副业成功案例分享
background属性中使用逗号设置了多个背景，它们相互叠加（而不是单个背景，图像覆盖颜色）。