2

我需要为某个 div 分配一些背景图像，问题是它需要从右侧定位，而不是 CSS 中通常的左侧。因此，当定义 时background-position，它可以读取，比如说，正确的，或者某个很大的百分比（这也是从屏幕左侧计算的，但无论如何都可以），就是这样。我无法使用像素并使其与容器右侧的固定距离保持一致。我在这里吗？那么，是否有解决方法？如果有帮助，与 LESS 有什么关系？从理论上讲，我可以将其设置为正确，然后以某种方式减少几个像素。

我们有 margin-right:+-px, padding-right:+px，但没有 background-position-right:+-px ？

4

3 回答 3

3 
background-position: right 20px;

https://developer.mozilla.org/en-US/docs/CSS/background-position

JSBIN 示例：http: //jsbin.com/ixejey/1/

更新：

哎呀，我可能误解了这个问题。上面将背景图像定位在右侧，距离顶部 20 像素——但距离右侧没有设定距离。我不认为你现在可以单独使用 CSS 来做到这一点。

现在，您可以做的不是直接在元素上使用背景图像，而是将元素包装在包装器 div 中，然后添加第二个 div 来保存“背景”图像并将其绝对定位 - 您可以从对一个特定的距离。

替代选项的示例：

<div id="yourContainer">
    <div id="yourBackGroundImage"></div>
    <div id="yourContent">your content</div>
</div>

CSS：

#yourContainer {
    position: relative;
}

#yourBackGroundImage {
    width: 100;
    height: 100;
    position: absolute;
    right: 50px;
}
于 2013-05-08T18:26:45.393 回答
2

第一个值(calc(100% - 0%))是水平位置，第二个值(calc(100% - 10%))是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您只指定一个值，则另一个值为 50%。. 默认值为：0% 0%

<div id="hero-content"></div>

CSS

#hero-content{
  background-position: 
    calc(100% - 0%) /* 0px from the right */
    calc(100% - 10%) /* 10% from the bottom */  
}
于 2018-01-30T10:29:20.457 回答
-1 
<div id="background"></div>

和

#b {
height:100%;
width:100%;
background: ; //put background style here
}
于 2013-05-08T18:43:52.420 回答