CSS:背景图像上的背景色

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

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

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

因此，是否可以为背景颜色和背景图像设置z-indexes ?

632882 次浏览
小开
最佳答案

你需要使用完整的属性名:

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

或者，你可以使用后台简写，并在一行中指定:

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

很有趣的问题，还没见过。这段代码对我来说工作得很好。在chrome和IE9上进行了测试

<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
小开 
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
小开

对我来说，这个解决方案并不奏效:

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

你也可以用一个小技巧来使用图像和颜色，就像这样

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>

其他样本盒中心图像和背景颜色

< p > 1。首先清除像素固定图像区域 2.样式中心图像区域框 3.Li背景或div颜色样式

小开

基于MDN Web文档，你可以使用简略的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;

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

小开
如果你想在背景中生成一个黑影，你可以使用 如下:< /强> < / p > 
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
小开

下面是我如何用背景中的图标来设计我的彩色按钮

我用“background-color”属性来表示颜色，用“background”属性来表示图像。

  <style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;


background-color: #cccccc;
}


.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}


.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>


<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
小开

这对我来说很管用:

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

你也可以删除一个实体阴影，并设置背景图像:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

如果第一个选项不工作，因为某些原因，你不想使用框阴影，你可以使用一个伪元素的图像，不需要任何额外的HTML:

.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
小开

也可以使用下一个语法。

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;
小开

假设你想要一个图标在右边(或左边)，那么这应该是最好的工作:

.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}

你也可以做background-size: contain;，但这应该是基本相同的。background-position将取决于你的图像。

然后你可以很容易地在hover上做一个替代状态:

.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
小开

你可以试试框影:插入

.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}

提交答案