如何将背景图像定位在其容器右侧的绝对距离？ [英] How can I position a background-image an absolute distance from the right of its container?

问题描述

 背景：我可以将一个小的背景图片/图标放置在容器中心左侧4个像素： url（...）no-repeat 4px 50％; 
  

如何将其从向右

解决方案

根据你的情况和你想要支持的浏览器，这工作（在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; //使它的行为类似一个背景
 background：url（...）no-repeat right 50％; 
} 
  

I can position a small background-image/icon 4 pixels from the center left of its container with:

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

How can I position it 4 pixels from the right?

解决方案

Depending on your situation and what browsers you want to support, this works (tested on IE7-8, Firefox):

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

Of course, if you are already putting a border on the right, this will not help you at all.

Added on edit: If the above doesn't work because your are using the border, and you don't care about IE7 (not sure we are quite at that point yet), and your "icon" width is known, then you could do:

.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%;
}

这篇关于如何将背景图像定位在其容器右侧的绝对距离？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！