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

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