Html CSS：背景图像和填充

CSS: Background image and padding

提问by user966582

I want to add a background image on the right side of the list items, and want to have some padding from the right side as well, but I'm unable to do that. Please have a look at following example:

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

HTML:

HTML：

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

CSS:

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

I know we can set the image position by pixels, but since each of the li has different width, I can't do that.

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

Here's JSFiddle link: http://jsfiddle.net/QeGAd/1/

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

采纳答案by Juan G. Hurtado

You can use percent values:

您可以使用百分比值：

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

Not pixel perfect, but…

像素不完美，但是……

回答by Mladen Janjetovic

You can be more precise with this:

你可以用这个更精确：

background-origin: content-box;

This will make image respect the padding of the box. http://www.w3schools.com/cssref/css3_pr_background-origin.asp

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

回答by Mo.

Use background-position: calc(100% - 20px) center, For pixel perfection calc()is the best solution.

使用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>

回答by Shailender Arora

You can achieve your results with two methods:-

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

First Methoddefine position values:-

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

HTML

HTML

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

CSS

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

First Demo:-http://jsfiddle.net/QeGAd/18/

第一个演示：- http://jsfiddle.net/QeGAd/18/

Second Methodby CSS :before:afterSelectors

CSS:before:after选择器的第二种方法

HTML

HTML

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

CSS

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

Second Demo:-http://jsfiddle.net/QeGAd/17/

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

回答by Ed Kolosovsky

background-clip: content-box;

The background will be painted within the content box.

背景将绘制在内容框中。

回答by Volodymyr Khmil

You can just add the padding to tour block element and add background-originstyle like so:

您可以将填充添加到游览块元素并添加如下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;
}

You can check several https://www.w3schools.com/cssref/css3_pr_background-origin.asp

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

回答by Dennis Jamin

The only option to actuall have this made pixel perfect is to create some transparent padding within the GIF itself. That way you can actually align it to the right of the LI and still have the background padding you are looking for.

使这个像素完美的唯一选择是在 GIF 本身内创建一些透明的填充。这样，您实际上可以将其与 LI 的右侧对齐，并且仍然具有您正在寻找的背景填充。

回答by hjindal

setting directionCSS property to rtl should work with you. I guess it isn't supported on IE6.

将方向CSS 属性设置为 rtl 应该适用于您。我猜它在 IE6 上不受支持。

e.g

例如

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