我可以將div的背景設置爲填充2個不同％的兩個不同圖像嗎？

在瀏覽W3Schools之後，我仍然不確定這是否可行。我可以將div的背景設置爲填充2個不同％的兩個不同圖像嗎？

這個想法是讓div是一個進度條。（是的，我知道jQuery UI的進度條。）我希望它從100％開始填充一個背景圖像，但是加班時間從0％/ 100％填充到100％/ 0％。

我看到它可能有多種背景圖像指定使用CSS：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple

，但我不知道如何在邏輯擴展到只有％的寬度。有任何想法嗎？由於

來源

2012-03-09 Sean Anderson

您不能設置背景圖像的寬度。但解決方案很簡單。 div本身就是0％的進度條（因此有未加載的背景圖像），然後在實際進度（從0％到100％進行動畫並具有加載的背景圖像）內部有另一個div。因此，您可以使用裏面的div 的寬度動畫來表示進度。

來源

2012-03-09 03:47:15

這是我通常做的方式...不需要任何的z-index無論是。 – 2012-03-09 06:26:53

這個網站有使用一個div內的跨度的幾個例子：

http://css-tricks.com/css3-progress-bars/

它不使用圖像（只是CSS3），但你可以很容易地更新它有兩個跨度的背景圖片和div。 CSS3確實允許多個背景圖片（http://www.css3.info/preview/multiple-backgrounds/），但我不確定它是否適合您的示例。

來源

2012-03-09 03:44:43

使用position: absolute;或position: relative;，可以將一個圖像與另一個圖像重疊;不過，你必須小心z-index。然後，您可以使用jQuery的animate()函數（如果您的進度表圖像寬度從0px開始，最終以100px結束），您可以使用jQuery的animate()函數爲要用作「進度表」的圖像的寬度設置動畫效果：

$("#progress_meter").animate({"width": "100px"}, 5000);

來源

2012-03-09 03:46:00

不，但您可以在初始div上設置另一個div，並具有更高的z-index屬性。

例如，下面的代碼，DIV-A將在DIV-B的頂部：

.div-a { 
    with: 50%; 
    height: 30px; 
    z-index: 2; 
} 

.div-b { 
    width: 100%; 
    height: 30px; 
    z-index: 1; 
}

來源

2012-03-09 03:52:03

我可以將div的背景設置爲填充2個不同％的兩個不同圖像嗎？

回答

相關問題