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

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

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

当前回答

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

其他回答

如果你碰巧在现代浏览器中碰到这个话题，你可以使用伪类:after来做任何与后台相关的事情。

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

这个CSS会把背景放在“”的右下角。元素的右侧有20px的空间。

看看这个小提琴，例如http://jsfiddle.net/h6K9z/226/

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

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

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

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

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

对大家都好

background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;

你可以在CSS3中这样做:

background-position: right 20px bottom 20px;

它适用于Firefox, Chrome, IE9+

来源:中数

推荐文章