CSS:背景颜色的背景图像
我有面板,如果这个面板被选中(点击它),我会将其着色为蓝色。另外,我在该面板上添加了一个小符号(.png
图片),表示所选面板以前已被选中。CSS:背景颜色的背景图像
因此,如果用户看到例如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');
非常有趣的问题,避风港还没有看到它。这段代码适合我。在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%;
}
感谢代码Francisc!正如他所说,加入背景颜色和图像也不能解决我的问题。有了这些帮助和我的代码的小改动,我设法解决了这个问题。 – Mikel
您还可以使用短招用图片和文字颜色都像这样: -
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.样式中心图像区域框 3.li背景或div颜色样式
如果有其他合理的选项,则内联CSS不适用。 – Smittles
基于MDN Web Docs您可以设置多个背景usi ng速记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;
分别设置各个属性参数。由于图像放置在颜色叠加层下,因此其属性参数也放置在颜色叠加参数之后。
如果你想在后台生成一个黑色的影子,你可以使用 如下:
background:linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
首届方法并没有为我工作。第二种简写法完美地工作。 –
第二个人也为我工作。谢谢史蒂夫。 – starkeen
第一个也没有为我工作。第二个。 – felwithe