使用 CSS 从右侧偏移背景图像

Offset a background image from the right using CSS

提问by nickf

Is there a way to position a background image a certain number of pixels from the right of its element?

有没有办法将背景图像从元素右侧放置一定数量的像素？

For example, to position something a certain number of pixels (say, 10) from the left, this is how I'd do it:

例如，要从左侧放置一定数量的像素（例如 10），我会这样做：

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

回答by Steven

I found this CSS3 feature helpful:

我发现这个 CSS3 特性很有帮助：

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

As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

据我所知，这在 IE8 中不受支持。在最新的 Chrome/Firefox 中，它运行良好。

See Can I usefor details on the supported browsers.

有关支持的浏览器的详细信息，请参阅我可以使用。

Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

使用来源：http: //tanalin.com/en/blog/2011/09/css3-background-position/

Update:

更新：

This feature is now supported in all major browsers, including mobile browsers.

现在，包括移动浏览器在内的所有主要浏览器都支持此功能。

回答by Pekka

!! Outdated answer, since CSS3 brought this feature

!! 过时的答案，因为CSS3 带来了这个功能

Is there a way to position a background image a certain number of pixels from the right of its element?

有没有办法将背景图像从元素右侧放置一定数量的像素？

Nope.

不。

Popular workarounds include

流行的解决方法包括

• setting a margin-righton the element instead
• adding transparent pixels to the image itself and positioning it top right
• or calculating the position using jQuery after the element's width is known.

• margin-right改为在元素上设置 a
• 向图像本身添加透明像素并对其进行定位 top right
• 或在元素宽度已知后使用 jQuery 计算位置。

回答by Matt Brock

The easiest solution is to use percentages. This isn't exactly the answer you were looking for since you asked for pixel-precision, but if you just need something to have a little padding between the right edge and the image, giving something a position of 99% usually works well enough.

最简单的解决方案是使用百分比。这并不是您要寻找的答案，因为您要求像素精度，但是如果您只需要在右边缘和图像之间有一点填充，那么给出 99% 的位置通常就足够了。

Code:

代码：

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

回答by Tami

Outdated answer: It is now implemented in major browsers, see the other answers to this question.

过时的答案：它现在已在主要浏览器中实现，请参阅此问题的其他答案。

CSS3 has modified the specification of background-positionso that it will work with different origin point. Unfortunately, I can't find any evidence that it is implemented yet in any major browsers.

CSS3 修改了 的规范background-position，使其适用于不同的原点。不幸的是，我找不到任何证据表明它已在任何主要浏览器中实现。

http://www.w3.org/TR/css3-background/#the-background-positionSee example 12.

http://www.w3.org/TR/css3-background/#the-background-position参见示例 12。

background-position: right 3em bottom 10px;

回答by luksak

As proposed here, this is a pretty cross browser solution that works perfectly:

正如此处提出的，这是一个非常完美的跨浏览器解决方案：

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

I used it since the CSS3 feature of specifying offsets proposed in the answer marked as solving the question is not supported in browsers so well yet. E.g.

我使用它是因为在标记为解决问题的答案中提出的指定偏移量的 CSS3 功能在浏览器中尚不支持。例如

回答by stedman

The most appropriate answeris the new four-value syntax for background-position, but until all browsers support ityour best approach is a combination of earlier responses in the following order:

在最合适的答案是背景，地位的新的四值的语法，但直到所有的浏览器都支持你的最好的办法是按以下顺序较早响应的组合：

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+ */

回答by Merosi

A simple but dirty trick is to simply add the offset you want to the image you are using as background. it's not maintainable, but it gets the job done.

一个简单但肮脏的技巧是简单地将您想要的偏移添加到您用作背景的图像中。它不可维护，但可以完成工作。

回答by Novocaine

This will work on mostmodern browsers...apart from IE (browser support). Even though that page lists >= IE9 as supported, my tests didn't agree with that.

这将适用于大多数现代浏览器......除了 IE （浏览器支持）。尽管该页面列出了 >= IE9 支持，但我的测试不同意这一点。

You can use the calc() css3 property like so;

您可以像这样使用 calc() css3 属性；

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

For me this is the cleanest and most logical way to achieve a margin to the right. I also use a fallback of using border-right: 10px solid transparent;for IE.

对我来说，这是实现右侧边距的最干净、最合乎逻辑的方法。我还使用了border-right: 10px solid transparent;用于 IE的后备。

回答by Desi

Ok If I understand what your asking you would do this;

好的，如果我明白您的要求，您会这样做；

You have your DIV container called #main-containerand .my-elementthat is within it. Use this to get you started;

你叫你的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;
}

By the way, it better practice to use classes if you referencing a lower level element within a page (I assume you are hence my name change above.

顺便说一句，如果您在页面中引用较低级别的元素，最好使用类（我假设您因此更改了我的名字。

回答by Tom Gaulton

The CSS3 specification allowing different origins for background-position is now supported in Firefox 14 but still not in Chrome 21 (apparently IE9 partly supports them, but I've not tested it myself)

CSS3 规范允许背景位置的不同来源现在在 Firefox 14 中得到支持，但在 Chrome 21 中仍然不支持（显然 IE9 部分支持它们，但我自己没有测试过）

In addition to the Chrome issue that @MattyF referenced there's a more succinct summary here: http://code.google.com/p/chromium/issues/detail?id=95085

除了@MattyF 引用的 Chrome 问题之外，这里还有一个更简洁的摘要：http: //code.google.com/p/chromium/issues/detail?id=95085