CSS: background image on background color

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.

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.

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.

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

标签： css background background-image background-color

8条回答

Emotional °昔

2楼-- · 2019-01-16 17:49

You can also use short trick to use image and color both like this :-

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

0人赞添加讨论(0) 举报

疯言疯语

3楼-- · 2019-01-16 17:56

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

Other Sample Box Center Image and Background Color

1.First clearpixel fix image area 2.style center image area box 3.li background or div color style

0人赞添加讨论(0) 举报

仙女界的扛把子

4楼-- · 2019-01-16 17:59

For me this solution didn't work out:

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

But instead it worked the other way:

<div class="block">
<span>
...
</span>
</div>

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

0人赞添加讨论(0) 举报

Luminary・发光体

5楼-- · 2019-01-16 18:00

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

0人赞添加讨论(0) 举报

仙女界的扛把子

6楼-- · 2019-01-16 18:04

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

0人赞添加讨论(0) 举报

戒情不戒烟

7楼-- · 2019-01-16 18:04

really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9

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

0人赞添加讨论(0) 举报

1 2 下一页

CSS: background image on background color

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间