我认为答案是否定的,但你能用 CSS 定位背景图像,使其与右侧相距固定数量的像素吗?
如果我设置 x 和 y 的 background-position
值,似乎它们只能分别从左侧和顶部进行固定像素调整。
background-position: right 30px center;
它适用于大多数浏览器。有关完整列表,请参阅:http://caniuse.com/#feat=css-background-offsets。
更多信息:http://www.w3.org/TR/css3-background/#the-background-position
可以使用属性 border
作为从右边开始的长度
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
有一种方法,但并非所有浏览器都支持(请参阅 coverage here)
element {
background-position : calc(100% - 10px) 0;
}
它适用于所有现代浏览器,but it is possible that IE9 is crashing。也没有覆盖=< IE8。
background-position-x: calc(90%);
- 即它只是从 100% 中减去了 10%
据我所知,CSS specification 当然,除了 CSS 表达式之外,并没有提供您所要求的确切内容。假设您不想使用表达式或 Javascript,我看到了三个骇人听闻的解决方案:
确保您的背景图像与容器的大小相匹配(至少在宽度上)并设置 background-repeat: repeat 或 repeat-x 如果只有宽度相等。然后,从右边出现 x 个像素的东西就像背景位置一样简单:-5px 0px。
使用百分比作为背景位置表现出比这里描述的更容易看到的特殊行为。试一试。本质上, background-position: 90% 50% 将使背景图像的右边缘与容器的右边缘对齐 10%。
创建一个包含图像的 div。显式设置包含元素位置的位置:如果尚未设置,则为相对。将图像容器设置为 position: absolute;右:10px; top: 10px;,显然调整最后两个你认为合适的。将图像 div 容器放入包含元素中。
尝试这个:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
请注意,上面的代码会将整个元素(不仅仅是背景图像)从右侧移动 5px。对于您的情况,这可能没问题。
在右侧使用透明像素作为右边距的图像解决方法。
相同的图像解决方法是创建一个 PNG 或 GIF 图像(支持透明度的图像文件格式),该图像在图像右侧的透明部分完全等于您要赋予右边距的像素数 (例如:5px、10px 等)
这在固定宽度和百分比宽度上都能很好地工作。对于在标题右侧具有加/减或上/下箭头图像的手风琴标题实际上是一个很好的解决方案!
缺点:不幸的是,您不能使用 JPG,除非容器的背景部分和 CSS 背景图像的背景颜色是相同的纯色(没有渐变/晕影),主要是白色/黑色等。
如果你碰巧在现代浏览器的这些日子里偶然发现了这个话题,你可以使用伪类 :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/
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+ */
如果只想指定 x 轴,可以执行以下操作:
background-position-x: right 100px;
background-position: right -100px center;
请注意,如果您省略 y-position
,它将无法正常工作,因为它认为像素的用途。
只需将像素填充放入图像中 - 在 photohop 中将 10px 或其他任何内容添加到图像的画布大小并在 CSS 中将其对齐。
我试图做一个类似的任务,让一个下拉箭头总是在表头的右侧,并想出了这个似乎在 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
您可以将背景图像放置在编辑器中,距离右侧 x 个像素。
background: url(images_url) no-repeat right top;
背景图像将位于右上角,但看起来距离右侧 x 像素。
适用于所有真实浏览器(以及 IE9+):
background-position: right 10px top 10px;
我用它来 RTL WordPress 主题。请参阅示例:temporary website 或 the real website 即将上线。查看大 DIV 右上角的图标。
我没有提到的另一个解决方案是使用伪元素,我相信这个解决方案可以与任何兼容 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/
如果容器具有固定高度:调整百分比(背景位置)直到它正确适合。
如果容器具有动态高度:如果您想要在背景和容器之间进行填充(例如当自定义样式输入、选择时),请将填充添加到图像并将背景位置设置为右侧或底部。
当我试图让一个选择框的背景适合我的选择右侧 5 px 时,我偶然发现了这个问题。就我而言,我的背景是一个向下箭头,它将取代基本的下拉图标。在我的情况下,背景的填充将始终保持不变(距右侧 5-10 像素),因此很容易修改为实际背景图像(使其尺寸在右侧宽 5-10 像素。
希望这可以帮助!
从左边调整百分比对我来说有点脆弱。当我需要这样的东西时,我倾向于将容器样式添加到包装器元素,然后使用 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
类是可选的,如果需要,将允许您的内容占用填充(负边距值应与包装器填充中的相应值匹配)。它有点冗长,但可以可靠地工作,而不必担心图像与其宽度和高度相比的相对位置。
自从提出这个问题以来已经很久了,但我刚刚遇到了这个问题,我通过这样做得到了它:
background-position:95% 50%;
负值的解决方案。调整 padding-right 以移动图像。
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
这适用于 Chrome 27,我不知道它是否有效或其他浏览器如何处理它。我对此感到惊讶。
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;
更适合所有背景: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;