CSS:背景颜色的背景图像

Question

我有一个面板,如果选择此面板(点击它),我将其涂成蓝色.此外,我.png向该面板添加一个小符号(图像),表示之前已选择了所选面板.

因此,如果用户看到例如10个面板并且其中4个具有这个小标记,则他知道他之前已经点击了这些面板.到目前为止这项工作很好.问题是现在我无法显示小号并同时使面板变蓝.

我用css background: #6DB3F2;和背景图像将面板设置为蓝色background-image: url('images/checked.png').但似乎背景颜色在图像上方,所以你看不到标志.

因此可以z-index为背景颜色和背景图像设置es吗？

Answer 1

您需要为每个使用完整的属性名称:

background-color: #6DB3F2;
background-image: url('images/checked.png');

或者,您可以使用背景速记并在一行中指定它们:

background: #6DB3F2 url('images/checked.png');

Answer 2

对我来说,这个解决方案没有成功:

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%;
}

Answer 3

基于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;

分别设置各个属性参数。因为图像是放在颜色叠加层下面，所以它的属性参数也放在颜色叠加层参数后面。

Answer 4

如果您想在后台生成黑影,可以使用以下内容:

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

Answer 5

也可以使用下一个语法。

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;

Answer 6

您还可以使用简短的技巧来使用图像和颜色，如下所示：-

body {
     background:#000 url('images/checked.png');
 }