CSS: 背景图片和填充

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

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/

160852 次浏览
小开
最佳答案

You can use percent values:

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

Not pixel perfect, but…

小开

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.

小开

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

e.g 

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

You can achieve your results with two methods:-

First Method define position values:-

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

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

Second Method by CSS :before:after Selectors

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

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

小开

You can be more precise with CSS background-origin:

background-origin: content-box;

This will make image respect the padding of the box.

小开

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

ul {
width: 100px;
}


ul li {
border: 1px solid orange;
background: url("https://placehold.co/200x125/e16d65/FFFFFF/png") no-repeat calc(100% - 10px) center;
}


ul li:hover {
background-position: calc(100% - 20px) center;
}
<ul>
<li>Hello</li>
<li>Hello world</li>
</ul>

小开

Use CSS background-clip:

background-clip: content-box;

The background will be painted within the content box.

小开

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

.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

小开

Adding box-sizing: content-box seems to also work. Note that you may have to adjust the height, width, and background-size to account for padding with this method.


提交答案