CSS：背景图像和填充

Posted 2023-03-06

【中文标题】CSS：背景图像和填充

【英文标题】：CSS: Background image and padding

【发布时间】：2012-04-28 14:50:05

【问题描述】：

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

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/

【问题讨论】：

使用白色实心边框

【参考方案1】：

您可以使用百分比值：

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

不是像素完美，但是……

【讨论】：

对于任何想知道的人：css 属性称为background-position。

【参考方案2】：

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

【参考方案3】：

将direction CSS 属性设置为 rtl 应该适合您。我猜它在 IE6 上不受支持。

例如

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

【参考方案4】：

您可以通过两种方法实现您的结果：-

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

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 :before:after 选择器

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/

【参考方案5】：

您可以使用CSS background-origin 更精确：

background-origin: content-box;

这将使图像尊重框的填充。

【讨论】：

事实上这太棒了！！宾果游戏。

@user966582 能不能把这个改成正确答案

太棒了！你太棒了，CSS 太棒了！

你让我的 Bootstrap 模态免于破坏我的固定位置 jumbotron 上的背景图像

这不是将背景的左上角偏移到填充内，但仍然在右下角的填充之外？ background-clip 的答案似乎更好。

【参考方案6】：

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

【讨论】：

如果您想要自定义背景填充，这很好。例如：background-position: 5px 10px; background-size: calc(100%-10px) calc(100%-20px);

@Steffan "+ 和 - 运算符必须始终被空格包围"，所以 background-size: calc(100% - 10px) calc(100% - 20px) ***.com/questions/30678942/…

【参考方案7】：

使用CSS background-clip:

background-clip: content-box;

背景将在内容框中绘制。

【讨论】：

与background-size: contain; 之类的东西一起使用时，它会“裁剪”图像

【参考方案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/cs-s-ref/css3_pr_background-origin.asp

【参考方案9】：

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

【讨论】：

你能提供一个工作代码示例吗？