CSS3的背景大小和背景位置問題

我正在編程一個小小的WP主題，需要一些幫助，使用新的CSS3背景大小屬性。CSS3的背景大小和背景位置問題

我有一個包含圖像作爲背景的DIV。圖像本身被設置爲比div更大，以呈現原始圖像的一點點切除：

.imageContainer { 
    background-size:154% 102%; 
    background-position-x:-28%; 
    background-position-y:0.28%; 
}

到目前爲止一切都很好。但如果大小≥100％，則調用background-position屬性會變得棘手。我放在一起一點點JS/CSS遊樂場來進行測試：

如果圖像寬≤99％，較少的背景位置-X是指圖像會離開。
如果圖像的寬度是100％，background-position-x將不做任何處理
如果圖像寬度≥101％，則較少的background-position-x表示圖像正確。

對於我計算下面的情況：

大容器：350x350px
圖片：540x359px
方式：（三百五分之一百）* 540 154≙％的寬度
（100/350）* 359≙102％身高。
另外：位置X：-28％和位置Y：（含自動計算）-0.28％

所以我有一個頁面渲染和大小有關的權利的大小。但正如我所說，較少的background-position-x（-28％）表示圖像正確，圖像位置錯誤。

它將不得不左移，因爲我計算了-28％「左邊距」。所以我做了一些試驗和錯誤，事實證明正確的位置將在50％左右。

這仍然是一個CSS3問題，或者它是我對這個屬性的功能的完全誤解？

編輯：here is an JSFiddle too

這是說明我的目標圖片... enter image description here

來源

2013-02-23 Julian F. Weinert

如果你能放在一起http://jsfiddle.net演示該問題，鏈接到真實圖像，將使它更容易讓我們來幫助你。同樣對於記錄「background-position：0 0」是有效的語法。 'background-postion-x'和'background-postion-y'實際上並不是W3C規範的一部分，並且在Firefox或Opera中不受支持。 – tw16 2013-02-23 18:09:19

你是正確的關於background-position-x/y。我認爲這樣閱讀會更容易。我正在開發Safari，所以它會工作。但是當我上線時我會刪除這個語法。所以這是一種生產狀態:)我會在幾分鐘內把小提琴放在一起。 – 2013-02-23 18:21:02

你去那裏http://jsfiddle.net/FJ3Ub/ – 2013-02-23 18:33:21

你的問題的關鍵是，你指定百分比給出的地步容器和圖像比賽。這一點是在圖像和容器中計算出來的。

所以，如果你想圖像居中，這意味着圖像的中心位於容器的中心。所以，這是你通過反覆試驗找到的價值。

這裏的關鍵是50％的背景位置總是得到圖像居中，並且如果該屬性指定10％，你不需要任何的計算

，那將意味着，指向圖像左側10％的點位於容器左側10％的位置。

公式來進行

如何從百分比轉換爲像素（的要求）。假設您有一個容器大小爲n並且圖片大於f您指定的背景位置爲x％。我們以此爲式因子一個爲一個= X * 100

位置在容器匹配是一個。在圖像中匹配的位置是afn。來自容器的圖像的位置是差異，其可以作爲和（f-1）給出。

這就解釋了爲什麼：

˚F> 1時的特性的表觀結果反轉。（圖像比容器大。F = 1（圖像是比同尺寸的容器）

現在將其轉換成空間的百分比時

結果是零，你只要按大小劃分所述容器（ñ），得到

一個（F-1）

或由圖像（FN）的大小除以得到

一（F-1）/ F

來源

2013-02-23 19:39:14 vals

所以多數民衆贊成在關於這個屬性的事情，我沒有找到記錄。這有點奇怪，似乎沒有被充分考慮......但我們需要使用它，因爲它:)所以你可以給我一個提示如何將這個**匹配**百分比轉換爲* *空間**百分比？和：px的行爲是一樣的嗎？ – 2013-02-24 05:42:26

我想這是屬性關鍵字的擴展。當您指定中心時，您將圖像的中心定位在容器的中心。當你指定正確的時候，你正在將圖像的右邊放在容器的右邊......絕對值（px或其他）的工作方式，你會期望他們:-)我會盡力給你你提出的公式 – vals 2013-02-24 08:37:41

我認爲** a = x/100 **或** x = a/100 **。 – Mohsenme 2016-06-20 11:24:15

CSS3的背景大小和背景位置問題

回答

相關問題