有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如,要将某个东西从左边定位一定数量的像素(比如10),我是这样做的:
#myElement {
background-position: 10px 0;
}
当前回答
过时的答案:它现在在主要浏览器中实现,请参阅 这个问题还有其他答案。
CSS3修改了背景位置的规格,使它可以在不同的原点上工作。不幸的是,我找不到任何证据表明它已经在任何主流浏览器中实现。
http://www.w3.org/TR/css3-background/#the-background-position 参见例12。
background-position: right 3em bottom 10px;
其他回答
background-position: calc(100% - 8px);
CSS3规范允许背景位置的不同来源现在在Firefox 14中得到支持,但在Chrome 21中仍然不支持(显然IE9部分支持它们,但我自己没有测试过)
除了@MattyF提到的Chrome问题之外,这里还有一个更简洁的总结: http://code.google.com/p/chromium/issues/detail?id=95085
我的问题是,当窗口调整大小时,我需要背景图像与右侧边界保持相同的距离,例如平板电脑/手机等 我的解决方案是像这样使用一个百分比:
background-position: 98% 6px;
它会固定在原地。
使用中心右边的位置,然后添加一个透明的边界来抵消它?
如果我明白你的要求你会这样做;
你有一个名为#main-container的DIV容器和其中的。my-element。用这个来开始吧;
#main-container {
position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
position:absolute;
top:0;
right:10px;
}
/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
float:right;
margin-right:10px;
}
顺便说一下,如果您在页面中引用较低级别的元素,最好使用类(我假设您因此而更改了上面的名称)。