使用CSS從右側偏移背景圖像

Question

有沒有辦法將背景圖像從其元素右側的一定數量的像素定位？

例如，定位的東西從一定數量的像素的（比如，10）離開，這是我怎麼會做它：

#myElement { 
    background-position: 10px 0; 
} 

Answer 1

我發現這個CSS3功能有幫助：

/* to position the element 10px from the right */ 
background-position: right 10px top; 

據我知道這是不是在IE8的支持。在最新的Chrome/Firefox中，它工作正常。

有關支持的瀏覽器的詳細信息，請參閱Can I use。

二手來源：http://tanalin.com/en/blog/2011/09/css3-background-position/

Answer 2

！過時的答案，因爲CSS3 brought this feature

有沒有辦法從其元素的正確位置背景圖像的一定數量的像素？

沒有。

熱門的解決方法包括

• 的元件代替
• 上設置margin-right加入透明像素到圖像本身和它定位top right
• 或計算使用jQuery元素的寬度是已知的之後的位置。

Answer 3

好的如果我明白你的要求，你會這樣做;

您的DIV容器名爲#main-container和.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; 
} 

順便說一句，更好的做法是使用類，如果你在頁面中引用一個較低的水平元素（我假設你是因此我的上述名稱變更

Answer 4

過時的答案：現在是在各大瀏覽器中實現，請參閱 其他回答這個問題。

CSS3已修改的background-position的規範，這樣它會與不同的原點工作。不幸的是，我無法找到任何EVID因爲它已在任何主流瀏覽器中實現。

http://www.w3.org/TR/css3-background/#the-background-position 見實施例12.

background-position: right 3em bottom 10px; 

Answer 5

，最簡單的解決方案是使用百分比。這並不是你尋求像素精度的正確答案，但是如果你只需要在右邊緣和圖像之間填充一點點的東西，那麼給出99％的位置通常效果不錯。

代碼：

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */ 
div.middleleft { 
    background: url("/images/source.jpg") 99% center no-repeat; 
} 

Answer 6

CSS3的規範，允許背景，地位不同的起源現在支持在Firefox 14，但仍無法在Chrome 21（顯然IE9部分支持他們，但我沒有測試它自己）

除了Chrome的問題是@MattyF引用有一個更簡潔的總結在這裏： http://code.google.com/p/chromium/issues/detail?id=95085

Answer 7

一個簡單而骯髒的伎倆是簡單地增加偏移，您W¯¯螞蟻對你用作背景的圖像。它不可維護，但它完成了工作。

Answer 8

使用中心右側作爲位置，然後添加一個透明邊框來抵消它？

Answer 9

這將工作在最現代瀏覽器...除了IE (browser support)。即使該頁面列出> = IE9支持，我的測試不同意這一點。

您可以像這樣使用calc（）css3屬性;

.class_name { 
    background-position: calc(100% - 10px) 50%; 
} 

對我來說，這是最清晰和最合乎邏輯的方式來實現右邊距。我還使用了用於IE的border-right: 10px solid transparent;的回退。

Answer 10

提議here，這是一個漂亮的跨瀏覽器的解決方案，完美的作品：

background: url('/img.png') no-repeat right center; 
border-right: 10px solid transparent; 

我用它，因爲在標記爲解決這個問題的回答提出的指定偏移的CSS3功能的瀏覽器不支持那麼好。例如。

Answer 11

如果您有固定寬度的元素並知道背景圖片的寬度，您可以簡單地將背景位置設置爲：元素的寬度 - 圖片的寬度 - 您想要的右側空白處。

例如：用100像素寬的元件和300像素寬的圖像，以獲得在右邊10px的的間隙，將其設置爲100-300-10 = -210px：

#myElement { 
    background:url(my_image.jpg) no-repeat -210px top; 
    width:100px; 
} 

您可以在元素左側獲取圖像的最右側80個像素，右側有20px的空白。

我知道它聽起來很愚蠢，但有時它節省了時間......我使用垂直方式（底部的間隙）用於導航鏈接與圖像下面的文本。

不確定它適用於你的情況。

Answer 12

的most appropriate answer爲背景，地位的新的四值的語法，但直到所有browsers support it你最好的辦法是較早響應以下順序的組合：

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */ 
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */ 
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */ 

Answer 13

我的問題是我需要的背景圖像從右邊框保持相同的距離時，窗口大小即對於平板電腦/手機等 我的解決辦法是使用一個percenatge像這樣：

background-position: 98% 6px; 

，它STIC ks到位。

Answer 14

如果你勻稱的元素，你可以使用：

.valid { 
    background-position: 98% center; 
} 

.half .valid { 
    background-position: 96% center; 
} 

在這個例子中，.valid將與圖片類和.half將是一個行與標準之一大小的一半。

髒，但作爲一種魅力，它的合理管理。

Answer 15

是的！以及定位的背景圖像，彷彿0像素從瀏覽器，而不是左邊的右邊 - 我使用：

background-position: 100% 0px; 

Answer 16

如果你想用這種添加箭頭/其它圖標的按鈕那麼你可以使用CSS僞元素？

如果它真的整個按鈕背景圖像，我傾向於納入間距爲圖像，而只使用

background-position: right 0; 

但是，如果我有一個設計箭頭添加到例如按鈕我往往有這樣的html：

<a href="[url]" class="read-more">Read more</a> 

而且往往做CSS如下：

.read-more{ 
    position: relative; 
    padding: 6px 15px 6px 35px;//to create space on the right 
    font-size: 13px; 
    font-family: Arial; 
} 

.read-more:after{ 
    content: ''; 
    display: block; 
    width: 10px; 
    height: 15px; 
    background-image: url('../images/btn-white-arrow-right.png'); 
    position: absolute; 
    right: 12px; 
    top: 10px; 
} 

通過使用after選擇器，我添加了一個使用CSS的元素來包含這個小圖標。您可以通過在a元素內添加一個範圍或<i>元素來做同樣的事情。但我認爲這是向按鈕添加圖標的更簡潔的方式，並且支持跨瀏覽器。

你可以看看這裏的小提琴： http://codepen.io/anon/pen/PNzYzZ

Answer 17

background-position: calc(100% - 8px);