CSS：背景颜色的背景图像

我有面板，如果这个面板被选中（点击它），我会将其着色为蓝色。另外，我在该面板上添加了一个小符号（.png图片），表示所选面板以前已被选中。CSS：背景颜色的背景图像

因此，如果用户看到例如10个面板，其中4个有这个小标志，他知道他已经点击过这些面板。迄今为止这项工作很好。现在的问题是我无法显示小号，并且同时使面板变成蓝色。

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

因此有可能为背景颜色和背景图像设置z-index es？

2011-11-19 mkn

185

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

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

或者，你可以使用背景速记，并指定所有在同一行：

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

来源

2011-11-19 16:05:37 dodger

首届方法并没有为我工作。第二种简写法完美地工作。 –

第二个人也为我工作。谢谢史蒂夫。 – starkeen

第一个也没有为我工作。第二个。 – felwithe

非常有趣的问题，避风港还没有看到它。这段代码适合我。在Chrome和IE9

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

来源

2011-11-19 16:07:04

-8

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

来源

2013-08-13 11:02:24

测试它对于我这个解决方案没有奏效：

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

来源

2014-07-24 21:57:00

感谢代码Francisc！正如他所说，加入背景颜色和图像也不能解决我的问题。有了这些帮助和我的代码的小改动，我设法解决了这个问题。 – Mikel

您还可以使用短招用图片和文字颜色都像这样： -

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

来源

2014-08-16 20:50:11

-2

<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颜色样式

来源

2014-12-27 07:03:34 alpc

如果有其他合理的选项，则内联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;

分别设置各个属性参数。由于图像放置在颜色叠加层下，因此其属性参数也放置在颜色叠加参数之后。

来源

2017-12-24 21:16:43 lukibsubekti

如果你想在后台生成一个黑色的影子，你可以使用如下：

background:linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

来源

2018-01-15 17:12:53

CSS：背景颜色的背景图像

回答

相关问题