剪下圖片的寬度從左邊，而不是右邊

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

然後定期調整元素大小。