背景位置值操作

我有一個項目，我正在構建XML文件中描述的幻燈片，但它需要允許基於偏移值的幻燈片的圖像定位。背景位置值操作

現在我有Y抵消了，現在唯一的問題是我需要能夠抵消一定數額的X的東西，但仍然保持％的年齡值行爲。

因此，基本上有背景位置的X開始在50％，然後抵消它的像素量和保持相對行爲％的年齡（50％+ offsetInPixels）？

2011-05-12 Stefan

你不能用純CSS做到這一點（此時，請參閱Rich Bradshaw's answer）。

你可以做到這在JavaScript的東西，如：

var totalWidth = 960; 
var xOffset = 10; 
el.style.backgroundPosition = ((totalWidth/2) + xOffset) +"px 50px";

來源

2011-05-12 17:08:33 jessegavin

+1可悲的是，我敢肯定@jessegavin是正確的。 – pixelbobby 2011-05-12 17:10:02

totalWidth在你的答案中代表什麼？ $（窗口）.WIDTH（）？ – Stefan 2011-05-12 17:40:08

Stefan，它將代表容器元素的總寬度。 – jessegavin 2011-05-12 17:43:03

我說你最好的選擇是堅持的背景圖像作爲圖像containter內...一個黑客的它的位，但它works另外，考慮（如傑西所說）如果你不想讓bg倒出，請加overflow:hidden。

<div id="main" > 
<div id="bg"><img src="http://www.google.com/images/logos/ps_logo2.png"/> </div </div>

#main { 
width:400px; 
    height:300px; 
    background-color:blue; 
    position:relative; 
} 
#bg { 
margin-left: 10px; 
    position:absolute; 
    width:100%; 
    height:100%; 
    margin-left:50%; 
    }

證明：http://jsfiddle.net/mhy3r/10/

來源

2011-05-12 17:14:18

爲了讓你的解決方案能夠很好地工作，你需要改變一些東西。 1）擺脫'background-attachment：fixed' 2）將'overflow：hidden'加入容器。另外，如果'＃main'內有任何兄弟元素，他們也需要定位，你將不得不處理z-index的東西。在這裏看到更新版本：http://jsfiddle.net/mhy3r/9/ – jessegavin 2011-05-12 17:22:38

@ jessegavin實際上，我的原始（甚至你的修復，雖然有幫助）在瀏覽器大小調整上變得挑剔。我已經重做了我的答案。 – 2011-05-12 17:25:52

你可以做到這一點，但它沒有得到廣泛的支持。

background-position: -moz-calc(50% - 20px) 0; 
background-position: calc(50% - 20px) 0;

目前（2011年5月）這隻適用於Firefox 4和IE9。

請參閱http://caniuse.com/#calc的兼容性。

來源

2011-05-12 17:32:18

支持IE瀏覽器不支持的一些事情。：D – 2011-05-12 17:32:52

我的想法確切 - 改變不了它！你可以從我寫的文章中看到，我假設webkit將最終得到它！ – 2011-05-12 17:35:27

+1真棒的甜奶酪。我不知道那是存在的。 – jessegavin 2011-05-12 17:40:00

我發現了另一個使用CSS3的解決方案。但是，它要求容器具有固定的大小。

HTML：

<div id="example">Example</div>

CSS：

#example { 
    width: 200px; 
    height: 200px; 
    padding-left: 100px; 
    background-origin: content-box; 
    background-position: 10px 10%; 
}

這是一個黑客位我猜的。它不是從邊框的左上角開始背景位置，而是使用含有50％（即100px）填充的內容框。就像我所說的，您需要知道50％填充的確切值，因爲編寫padding-left: 50%;將被解釋爲父元素的50％。

如果你需要這個容器內的全部空間，你可以把另一個<div>到它與margin-left: -100px;

來源

2011-05-12 17:39:22 Akinzekeel

背景位置值操作

回答

相關問題