Question

如果选择了这个面板（点击它），我有一个蓝色的面板。此外，我向该面板添加了一个小符号（.png图像），表示之前已选择了所选面板。

因此，如果用户看到例如10个面板，其中4个面板有这个小标志，那么他知道他之前已经点击了这些面板。到目前为止这项工作很好。现在的问题是我无法显示小号并同时将面板设为蓝色。

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

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

Answer 1

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

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

或者，您可以使用背景速记并在一行中指定所有内容：

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

Answer 2

对我来说，这个解决方案没有成功：

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

Answer 3

如果你想在后台生成黑影，你可以使用以下内容：

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

Answer 4

非常有趣的问题，尚未见过它。这段代码对我来说很好。用chrome和IE9测试它

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

Answer 5

您还可以使用短句来使用图像和颜色，如下所示： -

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

Answer 6

这实际上对我有用：

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

Answer 7

根据MDN Web Docs，您可以使用简写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;

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

Answer 8

这是我在后台用图标设置彩色按钮样式的方式

我将“ 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>

Answer 9

也可以使用下一种语法。

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;

Answer 10

假设您想要在右侧（或左侧）放置一个图标，那么效果最好：

.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将会出现在您的图片上。

然后，您可以轻松地将鼠标悬停在另一状态：

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

Answer 11

<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.首先清晰像素修复图像区域 2.中心图像区域框 3.li背景或div颜色样式

Answer 12

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

CSS：背景颜色的背景图像

12 个答案:

也可以使用下一种语法。

示例