從右側的背景位置百分比

有沒有一種方法可以從右側顯示background image百分比？以像素爲單位，這些值運行良好，但不是百分比！ JSfiddle 從右側的背景位置百分比

HTML：<div></div>

CSS：

div { 
    position: absolute; top: 0; left: 0; bottom: 0; right: 0; 
    background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png'); 
    background-size: auto 90%; 
    background-position: right 20% center; 
    background-repeat: no-repeat; 
}

來源

2017-07-03 Eugene Mikhushkin

我沒有看到這個問題。你能具體瀏覽器嗎？ – Lifka

你是否考慮到這些百分比是基於圖像顯示的實際尺寸（關於你的「背景尺寸：自動90％」）......？ – CBroe

我想你可能有一個錯誤。你說：

background-position: right 20% center;

它應該是X% Y%：

div { 
    position: absolute; top: 0; left: 0; bottom: 0; right: 0; 
    background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png'); 
    background-size: auto 20%; 
    background-position: 90% 50% ; 
    background-repeat: no-repeat; 
}

JSFiddle

來源

2017-07-03 10:14:32 user1156544

它們指的是用於指定_edge偏移值的「擴展」語法，請參閱https://developer.mozilla.org/en/docs/Web/CSS/background-position – CBroe

你的背景是太大了。它大於100％。這給你不可預知的結果！在這裏你可以看到你的代碼與更小的PNG大小，按預期工作！

div { 
    position: absolute; top: 0; left: 0; bottom: 0; right: 0; 
    background-image: url('http://www.pngall.com/wp-content/uploads/2016/07/Arrow-PNG-Pic.png'); 
    background-size: auto 10%; 
    background-position: right 10% center; 
    background-repeat: no-repeat; 
}

https://jsfiddle.net/zn2ujy4b/

來源

2017-07-03 10:16:39 LucemFerre

背景圖像應該有可能由x軸溢出左邊。當我開始將圖像寬度縮放到90％以上時，「背景位置」百分比按預期工作。 –

從右側的背景位置百分比

回答

相關問題