css - 如何将背景图像放置在距其容器右侧绝对距离的位置？

Question

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

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

如何将它定位在距右边 4 像素的位置？

Answer 1

根据您的情况和您希望支持的浏览器，这可行(在 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%;
}