Question

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


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

的图1 的

但是，如果我希望每张图片的尺寸略有不同，我不知道该怎么做。我认为咒语是一种内联位置和维度定义，如 fig.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;
    }

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

Answer 2

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

DEMO： 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;
}

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

如何为单个背景定义控制多个图像

2 个答案: