如何控制單個背景定義的多個圖像

在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

如何控制單個背景定義的多個圖像

回答

相關問題