如何在IE8中實現多個背景圖片效果GWT

我想在IE 8中有多個背景圖片效果，有沒有可能或者是否有其他方式應用於元素。如何在IE8中實現多個背景圖片效果GWT

來源

2014-06-30 pbhle

使用重疊的DIV和應用背景圖像對他們來說，IE8不支持此CSS3規則（http://caniuse.com/multibackgrounds）

來源

2014-06-30 09:35:18

你可以給我舉個例子..我在gwt中有垂直面板，我想將多個背景應用到該面板..我該怎麼辦？ – pbhle

這是一支筆：http://codepen.io/herrfischer/pen/yKzBm –

由於IE8支持:pseudo elements所以使用:after和:before你可以創建一個多背景效果。看看DEMO。

HTML 只需要一個格。

<div id="silverback"></div>

CSS

#silverback { 
    position: relative; 
    height: 150px; 
    width:500px; 
    background: url("http://lorempixel.com/100/150/") no-repeat; 
    top:0; 
    left:0; 
    right:0; 
    zoom:1; 
    border:1px solid #ef8913; 
} 
#silverback:before { 
    height:150px; 
    width:100px; 
    content: " "; 
    position:absolute; 
    top:0; 
    left:110px; 
    background: url("http://placehold.it/100x150/") 0 0 no-repeat; 
} 

#silverback:after { 
    height: 150px; 
    width:100px; 
    content: " "; 
    position:absolute; 
    top:0; 
    left:220px; 
background: url("http://lorempixel.com/100/150/") 0 0 no-repeat; 
}

按照評論張貼更新DEMO。

Updated DEMO

來源

2014-06-30 10:16:24

.actionPanel {margin-top：7px; margin-left：5px; text-align：center; background：url（「cloud/images/（「cloud/images/right_top_round.png」）no-repeat scroll 100％0px，url（「cloud/images/left_bottom_round.png」）no-repeat scroll 0px 100 ％， \t \t \t \t \t \t URL（「雲/圖像/ right_bottom_round.png」）無重複100％100％， URL（「雲/圖像/ left_middle.png」）重複-Y滾動0像素0像素， url（「cloud/images/top_middle.png」）repeat-x scroll 0px 0px， url（「cloud/images/right_middle.png」）repeat-y scroll 100％0px， }我怎麼處理這個.. – pbhle

請看看。 http://jsbin.com/pahiruma/3/edit –

現在DEMO適合你嗎？ –

我們可以將背景圖像使用它的CSS屬性的「背景」，以div的，這樣我們會與一個圖像來完成。現在添加另一個背景圖像到div添加一個類到div。用另一個背景圖像設置類css 。

例我們有一個div裏面，我們有我們要申請兩個背景圖像

現在，如果我們想另一個背景圖像應用到這個相同的錨標記嘗試一個錨標記使用

<div><div class="clsAnother"></div><a style="background:url()"></a></div> 


In style tag, give style to this class: 
class="clsAnother"></div><a {background:url(../../CustomerImages/tick-icon.png) 0 0 no-repeat; }

這會將另一個圖像添加到錨的背景。注意：您只需在IE瀏覽器的情況下添加類，因爲IE不能理解「background」屬性中的多個url。雖然「背景」屬性中的多個網址適用於Mozilla和Chrome。

來源

2015-03-24 12:36:21

如何在IE8中實現多個背景圖片效果GWT

回答

相關問題