從左邊算起的CSS背景位置？我想要它

我需要爲某個div分配一些背景圖像，事情是它需要從右側定位，而不是通常在CSS中留下的左側。因此，當定義background-position時，它可以讀取，比如說，正確的或者一些很大的百分比（也可以從屏幕的左側計算，但無論如何都可以），就是這樣。我無法使用像素，並使其與容器右側的距離保持不變。我在這裏嗎？那麼，是否有解決這個問題的方法？任何與LESS有關的事情，如果有幫助？從理論上講，我可以將它設置爲正確，然後以某種方式減少幾個像素。從左邊算起的CSS背景位置？我想要它

我們有margin-right：+ - px，padding-right：+ px，但不是background-position-right：+ - px？

來源

2013-05-08 EdelAli

如果你的手之前知道div和圖像的尺寸無法理解的反對投票 – vals 2013-05-08 19:00:07

，就可以計算出一個百分比這樣做。請參閱此處：[http://stackoverflow.com/a/15044753/1926369]。大比例不是從左側計算的！（無論如何，對於你的目的來說都沒有多大幫助） – vals 2013-05-08 19:07:18

background-position: right 20px;

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

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

UPDATE：

糟糕，我可能誤解的問題。上面將背景圖像定位在右側，距離頂部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; 
}

來源

2013-05-08 18:26:45

哇！它也可以工作嗎？十分感謝！ – EdelAli 2013-05-08 18:30:56

......但這可能不是我的答案，DA。通過改變20px，你的例子就是改變圖像的垂直位置，而不是水平向左<>右側。 – EdelAli 2013-05-08 18:35:57

@EdelAli刷新頁面。我對我的答案做了一些更新。 – 2013-05-08 18:41:18

-1

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

和

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

來源

2013-05-08 18:43:52

對不起？是不是太簡單了？我問了我的問題是否足夠清楚了...... – EdelAli 2013-05-08 18:48:39

DA對此問題發表了評論。 BoltClock「，你必須設置2個以上的值，所以正確的20px被認爲是x的偏移量」你是否也意味着這一點？我還沒有得到它，但我會嘗試... – EdelAli 2013-05-08 18:59:09

第一值（計算值（100％ - 0％））是horiz附加位置和第二個值（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-30 10:29:20

從左邊算起的CSS背景位置？我想要它

回答

相關問題