Question

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

我们有右边距：+ - px，填充右：+ px，但不是背景位置右：+ - px？

Answer 1

background-position: right 20px;

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

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

更新：

哎呀，我可能误解了这个问题。上面将背景图像定位在右侧，距离顶部20px - 但距离右侧不是一定距离。我不认为你现在可以单独用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;
}

Answer 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 */  
}

Answer 3

<div id="background"></div>

和

#b {
height:100%;
width:100%;
background: ; //put background style here
}

从左边计算CSS背景位置？我想要它

3 个答案: