Question

我想在列表项的右侧添加背景图像，并且想要从右侧添加一些填充，但我无法做到这一点。请看下面的例子：

HTML：

<ul>
    <li>Hello</li>
    <li>Hello world</li>
</ul>

CSS：

ul{
    width:100px;  
}

ul li{
    border:1px solid orange;
    background: url("arrow1.gif") no-repeat center right;
}

ul li:hover{
     background:yellow url("arrow1.gif") no-repeat center right;
}

我知道我们可以按像素设置图像位置，但由于每个li都有不同的宽度，我不能这样做。

这是JSFiddle链接： http://jsfiddle.net/QeGAd/1/

Answer 1

你可以更准确地说：

background-origin: content-box;

这将使图像尊重盒子的填充。 http://www.w3schools.com/cssref/css3_pr_background-origin.asp

Answer 2

您可以使用百分比值：

background: yellow url("arrow1.gif") no-repeat 95% 50%;

不像素完美，但是......

Answer 3

您可以通过两种方法获得结果： -

第一种方法 定义位置值： -

<强> HTML

 <ul>
 <li>Hello</li>
 <li>Hello world</li>
 </ul>

<强> CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}


ul li:hover{
    background: yellow url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}

首次演示： - http://jsfiddle.net/QeGAd/18/

CSS 之前的

第二种方法 ：之前：之后选择器

<强> HTML

<ul>
<li>Hello</li>
<li>Hello world</li>

<强> CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
}

ul li:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

ul li:hover {
    background:yellow;
}

ul li:hover:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

第二次演示： - http://jsfiddle.net/QeGAd/17/

Answer 4

使用background-position: calc(100% - 20px) center，对于像素完美calc()是最佳解决方案。

ul {
  width: 100px;
}
ul li {
  border: 1px solid orange;
  background: url("http://placehold.it/30x15") no-repeat calc(100% - 10px) center;
}
ul li:hover {
  background-position: calc(100% - 20px) center;
}

<ul>
  <li>Hello</li>
  <li>Hello world</li>
</ul>

Answer 5

background-clip: content-box;

背景将在内容框中绘制。

Answer 6

实现这个像素的唯一选择就是在GIF内部创建一些透明填充。这样你实际上可以将它对齐到LI的右边，并且仍然有你正在寻找的背景填充。

Answer 7

将direction CSS属性设置为rtl可以与您合作。我猜它在IE6上不受支持。

例如

<ul style="direction:rtl;">
<li> item </li>
<li> item </li>
</ul>

Answer 8

您可以将填充添加到游览块元素中，并添加background-origin样式，如下所示：

.block {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  border:1px solid #e5e5e5;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-image: url(_your_image_);
  height: 14rem;
  width: 10rem;
}

您可以检查几个https://www.w3schools.com/cssref/css3_pr_background-origin.asp

Answer 9

添加 box-sizing: content-box 似乎也有效。请注意，您可能需要调整 height、width 和 background-size 以考虑使用此方法进行填充。

CSS：背景图片和填充

9 个答案: