背景位置值操作

我有一个项目，我正在构建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

背景位置值操作

回答

相关问题