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