jquery - 从左侧而不是右侧剪切图片的宽度

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 背景位置：

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

然后定期调整元素大小。