css – 如何将背景图像与其容器右侧的绝对距离定位？

我可以将一个小的背景图像/图标放在距其容器左中心4个像素的位置：

background: url(...) no-repeat 4px 50%;

如何将它从右边4个像素定位？

根据您的情况和您想要支持的浏览器,这可以工作(在IE7-8,Firefox上测试)：

background: url(...) no-repeat right 50%; border-right: 4px solid transparent;

当然,如果你已经在右侧设置边框,这根本不会对你有所帮助.

在编辑时添加：如果以上不起作用,因为你正在使用边框,并且你不关心IE7(不确定我们是否还在那时),并且你的“图标”宽度已知,那么你可以做：

.yourContainer {
  position: relative;
}

.yourContainer:after {
  content: ' '; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 4px; 
  width: 10px; //icon width
  z-index: -1; //makes it act sort of like a background
  background: url(...) no-repeat right 50%;
}