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

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

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

---

我怎样才能把它定位在离右边4个像素的位置呢？

据我所知，恐怕你不能

流行技巧：

• 为图像添加4倍的透明边距，并给出 它

  背景位置：右

• 向元素添加4px

  margin right

  （在某些情况下有效，在其他情况下无效）

• 使用jQuery确定元素的权重并调整图像位置（恶心！）

CSS3增加了一个：

---

应将背景图像从右侧垂直居中放置10px。
根据您的情况和您希望支持的浏览器，这一方法可行（在IE7-8、Firefox上测试）：
当然，如果您已经在右侧设置了边界，这对您毫无帮助
编辑时添加：如果上述操作不起作用，因为您使用的是边框，并且您不关心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%;
}

怎么样

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

---

如果您需要边框
，您可能需要使用百分比：

table.dataTable thead.sorting\u asc{
背景：url（“http://cdn.datatables.net/1.10.0/images/sort_asc.png）无重复30%50%；
}
table.dataTable thead.sorting\u desc{
背景：url（“http://cdn.datatables.net/1.10.0/images/sort_desc.png）无重复30%50%；
}
table.dataTable thead.排序{
背景：url（“http://cdn.datatables.net/1.10.0/images/sort_both.png）无重复30%50%；
}

由FF和Chrome支持（标题为mutliple）。如果这对您有效，为什么不呢！（可能提供IE后备方案。）可能不是重复的，因为两年后，可能会有不同的答案。CSS3规范文档包含以前（CSS2.1）规范以及新规范的所有相关属性-链接到的

背景位置与CSS2.1相同-即它允许在右侧定位，但是不允许从右向内定位。不，如果你向下滚动，它说它允许四种规格。So
背景位置：右10px顶部0px
会将它从右上方放置10。四种规格的
背景位置对我在Firefox或IE8上不起作用。我想你也没有让它工作？哦，这是一个非常好的主意+1你的意思和其他7年前的答案完全一样？
.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%;
}

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