从左侧切割图片的宽度，而不是右侧

Question

我有一张像

这样的照片

现在，我希望实现类似进度条的功能，这样这张图片应该从一个非常短的图片开始，变得越来越长。

我现在将它作为背景图像放在div中。现在，如果我设置宽度（如300），右侧箭头将被切断。无论如何我能做到这一点所以只有左边会被切割而不是右边？

非常感谢！

Answer 1

您需要在css中指定背景图片的位置

<强> HTML

<div class="progress-bar">
    <div class="progress-bar-image"></div>
</div>

<强> CSS

.progress-bar {width:100%; height:40px}
.progress-bar-image { background: url('http://i.stack.imgur.com/yWm8U.png') top right no-repeat; width:100px; height:30px;}

请参阅jsfiddle

Answer 2

使用css background-position：

.yourClassName
{ 
    background-image:url('your-image');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:right; 
}

然后定期调整元素的大小。