尝试将图像叠加到 background-image:url(...) 在也是 background-image:url(...) 的图像上 - 不工作

Question

我正在尝试通过 CSS background-image:url(...).

将图像放在现有图像上

我有以下 class:

.imageContainer {
    width:318px;
    height:207px;
    background-image:url('images/Generic Chrome Notification no_image.png');
}

然后，我有这个 class:

.iconImage
    {
        width:45px;
        height:45px;
        background-image:url("https://image.s7.sfmc-content.com/lib/fe9613727166077c73/m/1/bf347e87-2e3f-4e6d-9c5f-806d3ef1e4af.png");
}

最后，这是输出：

上图中的白色方块（1 号）实际上是 2 号图像的一部分。我的 HTML 布局使得上面的白色方块对应于上面提到的第一个 CSS class。但是，我在那里看不到图像。我 F12'd Dev Tools 以确保 <div class="iconImage"></div> 实际上在白色方块中，而且确实如此。

那么，是否可以使用 background-image:url(...) 将图像叠加在一起？

Answer 1

可以，这是一个将 2 张图片叠加在另一张图片上的示例

.img1 {
  position: relative;
  height: 400px;
  width: 400px;
  background: url(https://images.unsplash.com/photo-1587613754760-cd9a285831b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60) no-repeat;
  background-size: cover;
}
.img2 {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 100px;
  width: 100px;
  background: url(https://images.unsplash.com/photo-1589292943875-996861aa36a3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60) no-repeat;
  background-size: cover;
}
.img3 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 100px;
  width: 100px;
  background: url(https://images.unsplash.com/photo-1589469884538-4e5d63671b09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60) no-repeat;
  background-size: cover;
}

<div class="img1">
  <div class="img2"></div>
  <div class="img3"></div>
</div>

Answer 2

您在 .iconImage 中使用的（背景）图像原始尺寸为 180x180 像素。由于您没有定义尺寸，因此它以原始尺寸显示，但只有一部分可见。图片如下所示：

它的大小是 180x180 像素，它的主要部分（上下 "AMGEN®" 的顶部和底部）是白色的，在你的截图中只有它的左上角是可见的：它是一个 45x45 像素的白色 part（左上角）的图片。所以一切都按预期工作，但看起来没有图像，因为左上角的部分只是白色...

要显示缩小的整个图像（您可能想要），您必须更改的一件事是添加 background-size: cover...

尝试将图像叠加到 background-image:url(...) 在也是 background-image:url(...) 的图像上 - 不工作

Trying to super-impose an image via background-image:url(...) over an image that's also background-image:url(...) - not working

html

css

background-image