CSS:背景颜色的背景图像

我有面板,如果这个面板被选中(点击它),我把它涂成蓝色。 另外,我在该面板上添加了一个小符号( .png图像),表示所选面板已经被选中。

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

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

因此,是否可以为背景颜色和背景图像设置z-index es?

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

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

或者,您可以使用背景缩写并将其全部指定为一行:

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

对我来说,这个解决scheme并没有解决:

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

真的有趣的问题,还没有看到它。 这段代码适合我。 testing它在铬和IE9

 <html> <head> <style> body{ background-image: url('img.jpg'); background-color: #6DB3F2; } </style> </head> <body> </body> </html> 

你也可以使用简短的技巧,像这样使用图像和颜色: –

 body { background:#000 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.首先clearpixel固定图像区域2.style中心图像区域框3.li背景或div颜色样式

 body { background-image:url('image/img2.jpg'); margin: 0px; padding: 0px; }