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

在CSS中，我试图找出如何单独控制堆叠在一起的两个背景图像的大小。所以在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

来源

2013-03-27 Nutritioustim

看看http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css我假设你可以调整大小，如下所述由grapien – Mal 2013-03-27 05:23:53

我认为你是几乎没有使用CSS我相信你可以如下做到这一点：

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

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

来源

2013-03-27 05:14:20 grapien

Sweeeet 。奇迹般有效。谢谢你的朋友:) – Nutritioustim 2013-03-27 12:08:04

不是问题我很高兴我可以帮助！ – grapien 2013-03-27 16:46:45

这将是比较容易的背景图像设置成两个不同的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; 
}

在我使用的，而不是图像，所以您将背景色演示需要调整它appropr Iately为图像。

来源

2013-03-27 05:10:32 Mal

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

回答

相关问题