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

Posted 2023-03-05

【中文标题】使用 CSS 从右侧偏移背景图像

【英文标题】：Offset a background image from the right using CSS

【发布时间】：2011-07-05 18:31:13

【问题描述】：

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

例如，要从 left 定位一定数量的像素（比如 10 个像素），我会这样做：

#myElement 
    background-position: 10px 0;

【问题讨论】：

你确定不是指background-position: -10px 0;？只是检查:)

我知道这有很多重复，但我找不到任何一个。

@thirtydot 将其从左边缘向左移动 10 个像素。

愚蠢的是它不可用......

@nickf 你确实意识到它在 2013 年底之前在大多数设备上都不可用，对吧？

【参考方案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/

更新：

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

【讨论】：

这个很好，可惜在 Safari 5.1.7 上无法使用（手机查看非常重要）

它现在可以在移动设备上运行（在 android、ios 和 WindowsPhone 上进行了检查）。仍然 Safari 5.1.7 不支持这里给出的背景位置。

我正在使用它，但对于较旧的浏览器有百分比回退，例如。背景位置：95% 中心； background-position: right 13px center;

不确定有多少人仍在使用旧到不支持此功能的浏览器。 Safari 用户现在应该使用更新的版本，尽管许多旧的 android 设备仍然存在。 caniuse.com/#feat=css-background-offsets 很容易为这些使用百分比回退（尽管不完全相同）。

请注意，这仅在您为垂直和水平位置指定基本位置时才有效，例如rightlefttopbottom。例如，以下内容不会呈现：background-position: right 10px 10px 但应写为background-position: right 10px top 10px

【参考方案2】：

！！过时的答案，因为CSS3 brought this feature

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

不。

流行的解决方法包括

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

【讨论】：

对扩展 CSS3 'background-position' 的更全面支持即将到来：***.com/questions/501375/…

【参考方案3】：

最简单的解决方案是使用百分比。这并不是您正在寻找的答案，因为您要求像素精度，但如果您只需要一些东西在右边缘和图像之间有一点填充，那么给出 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;

【讨论】：

+1 “我们将在下周进行像素对齐” - 总是有效。

这个解决方案似乎在所有浏览器中运行得最为一致。

【参考方案4】：

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

CSS3 修改了background-position 的规范，使其可以与不同的原点一起工作。不幸的是，我找不到任何证据表明它已在任何主流浏览器中实现。

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

background-position: right 3em bottom 10px;

【讨论】：

谢谢塔米！不幸的是，这对我在 Firefox 4 或 Chrome 11 中都不起作用。

这是在 Opera 中实现的。觉得好得令人难以置信，然后我在其他浏览器中测试，我是对的。

这在当前版本的 Chrome 中仍然不起作用。 Version 21.0.1180.89

Chrome Canary (v26) 现在支持此功能。一旦它渗透到发布渠道，并且 Safari 更新了他们的引擎，只有 IE6-8 将缺乏支持（IE9/10 已经支持新格式）。

刚刚测试了这个，它现在可以在 Firefox (v.18.0.2)、IE (v.9.0.8) 和 Chrome (v.25.0.1364.97) 中运行，但它还不能在Safari (v.5.1.2)。很想知道是否有人知道何时推出;-)

【参考方案5】：

正如here 建议的那样，这是一个非常完美的跨浏览器解决方案：

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

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

【讨论】：

当我需要那个边框是某种颜色的时候呢？

这是一个很好的答案，因为您可以在保持像素精度的同时保持跨浏览器兼容。谢谢！ （如果你想要一个特定颜色的边框，请使用某种类型的包装器来包装输入并将边框添加到该元素。）

【参考方案6】：

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

【参考方案7】：

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

【参考方案8】：

这将适用于大多数现代浏览器...除了 IE (browser support)。即使该页面列出 >= IE9 支持，但我的测试并不同意。

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

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

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

【讨论】：

这个很好，可惜在 Safari 5.1.7 上无法使用（手机查看非常重要）

那么你应该使用一个在 Safari 中工作的背景位置，并且可以被可以使用它的浏览器覆盖。例如：background-position: 92% 8px; background-position: calc(100% - 12px) 8px;

不适用于所有浏览器老兄。 right 10px center 语法在浏览器中具有更多扩展支持。

请阅读我在“大多数现代浏览器”上声明此功能的第一行。我从来没有说过它适用于所有这些。

根据 caniuse 的说法，使用 calc 会使 IE9 崩溃……一旦您将 _ 替换为 -

【参考方案9】：

好的，如果我理解你的要求，你会这样做；

您有一个名为#main-container 和.my-element 的DIV 容器在其中。使用它来帮助您入门；

#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;

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

【参考方案10】：

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

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

【讨论】：

我刚刚对此进行了测试，它现在可以在 Firefox (v.18.0.2)、IE (v.9.0.8) 和 Chrome (v.25.0.1364.97) 中运行，但不能在 Safari ( v.5.1.2)

【参考方案11】：

如果你有比例元素，你可以使用：

.valid 
    background-position: 98% center;


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

在本例中，.valid 将是带有图片的类，.half 将是标准行大小的一半。

很脏，但作为一种魅力，它是可以合理管理的。

【讨论】：

就我而言（使用固定宽度布局），这正是我所需要的。谢谢。

【参考方案12】：

例如，如果您想使用它来向按钮添加箭头/其他图标，那么您可以使用 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 元素中添加一个 span 或 <i> 元素来执行相同的操作。但我认为这是向按钮添加图标的一种更简洁的方式，并且支持跨浏览器。

你可以在这里查看小提琴： http://codepen.io/anon/pen/PNzYzZ

【讨论】：

应该是 content: ''; 而不是 content:0; 但这对我来说是一个有用的解决方案

【参考方案13】：

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

【参考方案14】：

使用 center right 作为位置，然后添加透明边框来偏移它？

【讨论】：

这还不错，但是内容也会从右侧移入。这可能会或可能不会破坏交易。这是它的外观示例：jsbin.com/ijewoq/1

认为这只是一个通过一些尝试和错误来平衡的案例 :) 希望它能成功！

【参考方案15】：

如果你有一个固定宽度的元素并且知道你的背景图片的宽度，你可以简单地将背景位置设置为：元素的宽度 - 图片的宽度 - 你想要在右边的间隙。

例如：对于一个 100px 宽的元素和一个 300px 宽的图像，要在右侧获得 10px 的间隙，请将其设置为 100-300-10=-210px ：

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

你会在元素左侧获得图像最右边的 80 像素，右侧有 20 像素的间隙。

我知道这听起来很愚蠢，但有时它可以节省时间......我以垂直方式（底部间隙）使用了很多用于带有文本下方图像的导航链接。

但不确定它是否适用于您的情况。

【参考方案16】：

我的问题是我需要背景图像在调整窗口大小时与右边框保持相同的距离，即用于平板电脑/移动设备等 我的解决方法是使用这样的百分比：

background-position: 98% 6px;

它固定在原地。

【讨论】：

这可能适用于您确切知道窗口尺寸的情况，但在网络上的大部分时间里，您无法确定这一点。查看可接受的答案，该答案适用于所有情况（在受支持的浏览器上）。

【参考方案17】：

是的！很好地将背景图像定位为距浏览器右侧而不是左侧的 0px - 我使用：

background-position: 100% 0px;