我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?

如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。


当前回答

如果容器有固定高度: 微调百分比(背景位置),直到它正确匹配。

如果容器有一个动态高度: 如果你想在你的背景和容器之间填充(比如当自定义样式输入时,选择),将你的填充添加到你的图像,并将背景位置设置为右侧或底部。

当我试图让一个选择框的背景适合我选择的右边5像素时,我偶然发现了这个问题。在我的例子中,我的背景是一个箭头,它将取代基本的下拉图标。在我的例子中,背景的填充将始终保持不变(右边5-10个像素),所以对实际的背景图像进行修改是很容易的(使右侧的尺寸宽5-10个像素)。

希望这能有所帮助!

其他回答

最合适的答案是background-position的新四值语法,但在所有浏览器都支持它之前,最好的方法是按照以下顺序组合之前的响应:

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

只需将像素填充到图像中-在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个像素。

你可以在CSS3中这样做:

background-position: right 20px bottom 20px;

它适用于Firefox, Chrome, IE9+

来源:中数