CSS：背景颜色的背景图像 [英] CSS: background image on background color

问题描述

我有面板，如果选择此面板（点击它），我会变成蓝色。此外，我向该面板添加一个小符号（ .png 图像），表示所选面板已被选中。

I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.

因此，如果用户看到例如10个面板并且其中4个具有这个小符号，则他知道他之前已经点击过这些面板。这工作很好，到目前为止。现在的问题是，我不能显示小的符号，并使面板同时蓝色。

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.

我将面板设置为蓝色css background：＃6DB3F2; 和背景图片 background-image：url（'images / checked.png'）。但是看起来背景颜色在图像上方，所以你看不到符号。

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.

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

Is it therefore possible to set z-indexes for the background color and the background image?

推荐答案

您需要使用完整的属性名称：

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');

这篇关于CSS：背景颜色的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！