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

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


当前回答

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

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

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

希望这能有所帮助!

其他回答

据我所知,CSS规范并没有提供您所要求的内容,当然,除了CSS表达式之外。除去你不想使用表达式或Javascript的假设,我看到了三个hack的解决方案:

Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px. Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container. Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.

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

试试这个:

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

注意上面的代码会将整个元素(不仅仅是背景图像)向右移动5px。这对你的案子来说可能没问题。

只需将像素填充到图像中-在photohop中添加10px或任何图像的画布大小,并在CSS中对齐它。

图像工作与透明像素在右边作为右边缘。

图像的变通方法是创建一个PNG或GIF图像(支持透明度的图像文件格式),在图像的右侧有一个透明的部分,恰好等于你想要给予右边距的像素数(例如:5px, 10px等)。

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

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