单张图片，当作为背景图片使用时，应用了仅部分可见的不透明度。

var duckbar1 = $("#divDuck1").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254
});

// to update percentage value to 15%
duckbar1.SetPercentage(15);
                

单张图片，当作为背景图片使用时，背景变暗。

var duckbar2 = $("#divDuck2").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254
});
                

没有背景图片（使背景完全透明）

var duckbar3 = $("#divDuck3").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254,
    backgroundOpacity: 0
});
                

两张不同的图片；一个“满”和一个“空”，背景图片没有透明度

var bucketbar = $("#divBucket").progressBar({
    imageUrl: 'images/BucketFull.png',
    backgroundImageUrl: 'images/BucketEmpty.png',
    imageHeight: 146,
    imageWidth: 176,
    backgroundOpacity: 1
});
                

一张仅有轮廓的图片，自动填充。

var piesBar = $("#divPie").progressBar({
    imageUrl: 'images/nz-pies.png',
    backgroundImageUrl: 'images/nz-empty.png',
    imageHeight: 342,
    imageWidth: 233,
    backgroundOpacity: 1
});