Question

我认为答案是肯定的，但是你可以用CSS定位背景图像，这样它就是远离右边的固定数量的像素吗？

如果我设置x和y的background-position值，那么它们似乎只分别从左侧和顶部进行固定像素调整。

Answer 1

background-position: right 30px center;

适用于大多数浏览器。有关完整列表，请参阅：http://caniuse.com/#feat=css-background-offsets。

更多信息：http://www.w3.org/TR/css3-background/#the-background-position

Answer 2

可以使用属性border作为右侧的长度

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

Answer 3

有一种方法，但每个浏览器都不支持它（参见coverage here）

element {
  background-position : calc(100% - 10px) 0;
}

适用于所有现代浏览器but it is possible that IE9 is crashing。也没有覆盖=＆lt; IE8。

Answer 4

据我所知，CSS specification当然没有提供你在CSS表达式之外所要求的确切内容。假设你不想使用表达式或Javascript，我看到了三个hackish解决方案：

确保您的背景图片与容器的大小匹配（至少在宽度上），如果只有宽度相等，则设置background-repeat: repeat或repeat-x。然后，从右侧看到x像素的内容就像background-position: -5px 0px一样简单。
使用background-position的百分比表现出比此处描述的更好看的特殊行为。试一试。基本上，background-position: 90% 50%会使背景图像的右边缘与容器的右边缘相距10％。
创建包含图像的div。如果尚未设置，则显式设置包含元素position: relative的位置。将图像容器设置为position: absolute; right: 10px; top: 10px;，显然可以根据需要调整最后两个。将图像div容器放入包含元素。

Answer 5

试试这个：

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

请注意，上面的代码将从右侧移动整个元素（仅限背景图像）5px。这可能适用于您的情况。

Answer 6

您可以在CSS3中执行此操作：

background-position: right 20px bottom 20px;

适用于Firefox，Chrome，IE9 +

来源：MDN

Answer 7

图像解决方法，右侧有透明像素作为右边距。

同样的图像解决方法是创建PNG或GIF图像（支持透明度的图像文件格式），图像右侧的透明部分与您想要的像素数完全相等保证金（例如：5px，10px等）

这在固定宽度和宽度百分比方面都能很好地协同工作。实际上是手风琴标题的一个很好的解决方案，在标题右侧有正/负或上/下箭头图像！

缺点：不幸的是，你不能使用JPG，除非容器的背景部分和CSS背景图像的背景颜色是相同的平面颜色（没有渐变/晕影），大多数是白/黑等。

Answer 8

如果你碰巧在现代浏览器的这些日子里偶然发现了这个话题，你可以使用伪类：后来做任何具有背景的事情。

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

这个css会将背景放在＆＃34; .container＆＃34;的右下角。右侧有20px空间的元素。

请参阅此小提琴，例如http://jsfiddle.net/h6K9z/226/

Answer 9

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 10

只需将像素填充放入图像中 - 在photohop中将图像的画布大小添加10px或其他任何内容，然后在CSS中将其对齐。

Answer 11

我正在尝试执行类似的任务，以便始终在表格标题的右侧显示一个下拉箭头，并提出这似乎在Chrome和Firefox中有效，但safari告诉我这是一个无效的属性。

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

在检查员中做了一些麻烦之后，我想出了这个跨浏览器的解决方案，该解决方案适用于IE8 +，Chrome，Firefox和Safari，以及响应式设计。

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

以下是它的外观和工作原理。 Codepen是用SCSS编写的 - http://cdpn.io/xqGbk

Answer 12

我还没有看到提到的另一个解决方案是使用伪元素，我相信这个解决方案适用于任何符合CSS 2.1的浏览器（≥IE8，≥Safari2，......），它也应该是响应式的：

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

示例：元素例如。方形大小的100px（不考虑边框）具有10px填充，并且应在右侧填充内显示背景图像。这意味着伪元素是80px大小的正方形。我们希望将它粘贴到元素的右边界，右：-10px; 。如果我们想让背景图像距离右边界5px，我们需要将右边的伪元素5px远离元素的右边界：-5px; 。 .. 在这里测试一下你自己：http://jsfiddle.net/yHucT/

Answer 13

您可以将背景图像在编辑器中定位为右侧x像素。

background: url(images_url) no-repeat right top;

背景图片将位于右上方，但右侧将显示为x像素。

Answer 14

根据我的喜好调整左边的百分比有点脆弱。当我需要这样的东西时，我倾向于将容器样式添加到包装元素，然后使用background-position: right bottom

将内容应用于内部元素

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

.content-breakout类是可选的，如果需要，将允许您的内容进入填充（负边距值应与包装填充中的相应值匹配）。它有点冗长，但可以可靠地工作，而不必担心图像相对于其宽度和高度的相对位置。

Answer 15

自从提出这个问题以来它一直很热，但我刚遇到这个问题而且我做到了：

background-position:95% 50%;

Answer 16

如果容器的高度固定： 调整百分比（背景位置）直到它正确匹配。

如果容器具有动态高度： 如果要在背景和容器之间填充（例如在自定义样式输入，选择时），请将填充添加到图像并将背景位置设置为右侧或底部。

我偶然发现了这个问题，而我正试图获得一个选择框的背景，以便从我选择的右边开始说5 px。在我的情况下，我的背景是一个向下箭头，将取代基本的下拉图标。在我的情况下，填充将始终保持相同（从右边5-10个像素）的背景，因此这是一个简单的修改，以带到实际的背景图像（使其尺寸在右侧宽5-10像素。

希望这有帮助！

Answer 17

如果只想指定x轴，则可以执行以下操作：

background-position-x: right 100px;

Answer 18

负值的解决方案。调整右边的填充以移动图像。

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

Answer 19

这适用于Chrome 27，我不知道它是否有效或其他浏览器使用它。我对此感到很惊讶。

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Answer 20

适用于所有真实浏览器（以及IE9 +）：

background-position: right 10px top 10px;

我用它来RTL WordPress主题。请参阅示例：temporary website或the real website即将推出。看看大DIV右角的图标。

Answer 21

对所有人更好 background：url（'../ images / bg-menu-dropdown-top.png'）离开20px top no-repeat！important;

定位CSS背景图像x右边的像素？

21 个答案: