ChatGPT解决这个技术问题 Extra ChatGPT

将 CSS 背景图像从右侧定位 x 像素?

css

我认为答案是否定的,但你能用 CSS 定位背景图像,使其与右侧相距固定数量的像素吗?

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

可能会有所帮助:stackoverflow.com/questions/1736922/…
你可以用 CSS3 做到这一点 - 见下文
@JoostS 这个编辑真的是强制性的吗?

p
publicJorn
background-position: right 30px center;

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

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


“我不知道它是否有效”......不是。有问题的属性具有值的标准顺序。
根据 CSS 背景和边框 3,它是有效的,这已经是候选推荐(准备实施的标准):w3.org/TR/css3-background/#the-background-position
这应该被选为“正确答案”。根据 MDN,IE9+ 和所有其他浏览器都支持它,这很棒! developer.mozilla.org/en-US/docs/Web/CSS/…
不知道为什么没有选择这个作为答案?这正是所要求的。
在 chrome 开发工具中尝试这个,它似乎没有工作(还没有真正彻底调查......)
J
Josh Crozier

可以使用属性 border 作为从右边开始的长度

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

此解决方案在 Safari 中运行良好,但不适用于 Chrome、Firefox 或 IE。
在FF为我工作。和铬。还有 IE 8 和 9。但不是 7。有用的黑客!
当您的选择框已经作为边框时不理想,否则将需要另一个 div 围绕框
背景:url('/img.png') no-repeat right 10px center;这会工作,我检查了Firefox
N
Nick Schmidt

有一种方法,但并非所有浏览器都支持(请参阅 coverage here

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

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


对于许多设计问题,这是一个非常强大的解决方案。谨慎!
所以即使在最新的 Chrome 中,这似乎也不起作用。当我检查元素时,它实际上是 background-position-x: calc(90%); - 即它只是从 100% 中减去了 10%
@ValentinE 也对我有用 :-) 我确实看到它转换为 90% - 我直接从 chrome 剪切并粘贴了它。除非在 Chrome 的开发版本中有一个奇怪的错误,否则我不知道为什么
@ValentinE 啊!我想到了。我将 LESS 用于 css,它有自己的 'calc' 函数优先。对于遇到此问题的其他人,请参阅:stackoverflow.com/questions/17904088/…
我在这里看到 caniuse.com/#feat=calc 这实际上会使 IE9 崩溃 - 所以如果您依赖它,您肯定要记住在 IE9 中进行测试
S
Steven

据我所知,CSS specification 当然,除了 CSS 表达式之外,并没有提供您所要求的确切内容。假设您不想使用表达式或 Javascript,我看到了三个骇人听闻的解决方案:

确保您的背景图像与容器的大小相匹配(至少在宽度上)并设置 background-repeat: repeat 或 repeat-x 如果只有宽度相等。然后,从右边出现 x 个像素的东西就像背景位置一样简单:-5px 0px。

使用百分比作为背景位置表现出比这里描述的更容易看到的特殊行为。试一试。本质上, background-position: 90% 50% 将使背景图像的右边缘与容器的右边缘对齐 10%。

创建一个包含图像的 div。显式设置包含元素位置的位置:如果尚未设置,则为相对。将图像容器设置为 position: absolute;右:10px; top: 10px;,显然调整最后两个你认为合适的。将图像 div 容器放入包含元素中。


感谢您的提示!是的,我现在确实设置了 w/ % 值,但在我的情况下效果不佳。这个 bg 图像应该出现在大小变化很大的元素上,所以右边的偏移量当然也会变化很大,从而破坏了一致性。无论如何,我敢肯定,我会采用一些 hacky 解决方法,但这对我来说很奇怪,这不是规范的一部分。看起来很简单,你可以从顶部或左侧开始,为什么不从底部或右侧开始呢?无论如何,也许在 css4 中,在我死的时候,所有主要浏览器都会正确支持它;)
请记住,您还可以使用 css :after 选择器将带有背景图像的元素附加到另一个元素的右侧。从那里开始,您可以给它负边距以将其放置在您想要的位置。如果您只想将非重复图像附加到右侧,这是一个非常干净的解决方案。
a
ahwebd

尝试这个:

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

请注意,上面的代码会将整个元素(不仅仅是背景图像)从右侧移动 5px。对于您的情况,这可能没问题。


A
Adrian Macneil

你可以在 CSS3 中做到这一点:

background-position: right 20px bottom 20px;

它适用于 Firefox、Chrome、IE9+

来源:MDN


s
saluce

在右侧使用透明像素作为右边距的图像解决方法。

相同的图像解决方法是创建一个 PNG 或 GIF 图像(支持透明度的图像文件格式),该图像在图像右侧的透明部分完全等于您要赋予右边距的像素数 (例如:5px、10px 等)

这在固定宽度和百分比宽度上都能很好地工作。对于在标题右侧具有加/减或上/下箭头图像的手风琴标题实际上是一个很好的解决方案!

缺点:不幸的是,您不能使用 JPG,除非容器的背景部分和 CSS 背景图像的背景颜色是相同的纯色(没有渐变/晕影),主要是白色/黑色等。


对我来说,这是唯一适用于所有浏览器的解决方案。
M
Mroz

如果你碰巧在现代浏览器的这些日子里偶然发现了这个话题,你可以使用伪类 :after 在后台做任何实际的事情。

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

这个css会将背景放在“.container”元素的右下角,右侧有20px的空间。

参见这个小提琴,例如 http://jsfiddle.net/h6K9z/226/


我喜欢你要去的地方,但它 :after 实际上更像是一个伪元素而不是一个类。仅用于澄清目的
正确,但不适用于
@Miguel 不再需要在那里工作 ;-) 对于那些仍然使用比 IE 8 更旧版本的人来说,让设计看起来尽可能丑! (..只要网站仍然可以访问..)
C
Community

most appropriate answer 是 background-position 的新四值语法,但在所有 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+ */

-webkit-calc 让我的 Safari 崩溃,并且零悔恨。 OSX 10.8.5 / Safari 6.0.5
j
joshudev

如果只想指定 x 轴,可以执行以下操作:

background-position-x: right 100px;

这在 Chrome 81.0.4044.138 中不起作用。这是说无效的属性值。
我能够让它使用:background-position: right -100px center; 请注意,如果您省略 y-position,它将无法正常工作,因为它认为像素的用途。
R
RMM

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


d
davidwickman

我试图做一个类似的任务,让一个下拉箭头总是在表头的右侧,并想出了这个似乎在 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


我提醒你,设置 % 也会让它根据容器的长度对齐,如果你有更大的容器,这可能会很乱
j
jocull

您可以将背景图像放置在编辑器中,距离右侧 x 个像素。

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

背景图像将位于右上角,但看起来距离右侧 x 像素。


把它倒退了..它是水平的然后是垂直的
R
Ronny Sherer

适用于所有真实浏览器(以及 IE9+):

background-position: right 10px top 10px;

我用它来 RTL WordPress 主题。请参阅示例:temporary websitethe real website 即将上线。查看大 DIV 右上角的图标。


l
llange

我没有提到的另一个解决方案是使用伪元素,我相信这个解决方案可以与任何兼容 CSS 2.1 的浏览器(≥ IE8,≥ Safari 2,...)一起使用,并且它也应该是响应式的:

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

示例:元素,例如。一个 100 像素的正方形(不考虑边框)有一个 10 像素的内边距,背景图像应该显示在右内边距内。这意味着伪元素是一个 80px 大小的正方形。我们想用 right:-10px; 将它粘贴到元素的右边框上。如果我们想让背景图像距离右边框 5px,我们需要使用 right:-5px; 将伪元素粘贴到距离元素右边框 5px 的位置...在这里自己测试一下:http://jsfiddle.net/yHucT/


P
Prusprus

如果容器具有固定高度:调整百分比(背景位置)直到它正确适合。

如果容器具有动态高度:如果您想要在背景和容器之间进行填充(例如当自定义样式输入、选择时),请将填充添加到图像并将背景位置设置为右侧或底部。

当我试图让一个选择框的背景适合我的选择右侧 5 px 时,我偶然发现了这个问题。就我而言,我的背景是一个向下箭头,它将取代基本的下拉图标。在我的情况下,背景的填充将始终保持不变(距右侧 5-10 像素),因此很容易修改为实际背景图像(使其尺寸在右侧宽 5-10 像素。

希望这可以帮助!


K
Kris Young

从左边调整百分比对我来说有点脆弱。当我需要这样的东西时,我倾向于将容器样式添加到包装器元素,然后使用 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 类是可选的,如果需要,将允许您的内容占用填充(负边距值应与包装器填充中的相应值匹配)。它有点冗长,但可以可靠地工作,而不必担心图像与其宽度和高度相比的相对位置。


B
Broncha

自从提出这个问题以来已经很久了,但我刚刚遇到了这个问题,我通过这样做得到了它:

background-position:95% 50%;

只要您不需要右侧的精确像素而是更流畅的布局,这个对我来说非常有效。
G
Greg Tatum

负值的解决方案。调整 padding-right 以移动图像。

<div style='overflow:hidden;'>

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

    </div>

</div>

D
Deedee

这适用于 Chrome 27,我不知道它是否有效或其他浏览器如何处理它。我对此感到惊讶。

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

这是无效的,铬只是对你很好。
a
azhar_SE_nextbridge

更适合所有背景: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;