1

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

    。我的课 {
      背景：
        url('overlay.png') 无重复中心，
        url('base.png') 无重复中心；
      背景尺寸：100% 100%；
    }

图。1

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

    。我的课 {
      背景：
        url('overlay.png') 不重复 0 0 / 100% 90%,
        url('base.png') 不重复中心 0 0 / 100% 100%;
    }

图2

4

2 回答 2

2

我认为您几乎可以使用 CSS 我相信您可以按以下方式进行操作：

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

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

于 2013-03-27T05:14:20.967 回答
0

将背景图像设置为两个不同的图像divs然后使用 z-index 将它们分层会更容易。

演示：http: //jsfiddle.net/vEMs4/

HTML：

<div id="bg1"></div>
<div id="bg2"></div>

CSS：

#bg1{
    position:absolute;
    top:0px;
    left:50px;
    height:200px;
    width:250px;
    background-color:blue;
    opacity:0.3;
    z-index:2;
}
#bg2{
    top:0px;
    left:0px;
    position:absolute;
    height:250px;
    width:250px;
    background-color:green;
    opacity:0.3;
    z-index:1;
}

在演示中，我使用背景颜色而不是图像，因此您需要针对图像进行适当调整。

于 2013-03-27T05:10:32.170 回答