html - 如何控制单个背景定义的多个图像

Question

在 CSS 中，我试图弄清楚如何单独控制 2 个背景图像的大小，它们相互堆叠。所以在 CSS 中，可以这样定义 1 个背景图像:background:url('base.png') no-repeat center;。为了在基本图像之上堆叠叠加层，您可以使用图 1 中的方法。

    .my-class {      background:        url('overlay.png') no-repeat center,         url('base.png') no-repeat center;      background-size: 100% 100%;    }

图 1

但是，如果我希望每张图片的尺寸略有不同，我不确定该怎么做。我想象咒语是一种内联位置和尺寸定义，如 图 2 所示。但我还没有完全正确。有谁知道如何做到这一点？提前致谢。

    .my-class {      background:        url('overlay.png') no-repeat 0 0 / 100% 90%,         url('base.png') no-repeat center 0 0 / 100% 100%;    }

图 2

Answer 1

我想你几乎已经使用 CSS 我相信你可以按如下方式做到这一点:

   .my-class {
      background:
        url('overlay.png') no-repeat center, 
        url('base.png') no-repeat center;
      background-size: 90px 80px, 100px 100px;
    }

你只需要逗号，然后设置第二个背景的大小。