剪下图片的宽度从左边，而不是右边

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; 
} 

然后定期调整元素大小。