【问题标题】:CSS: Background image and paddingCSS:背景图像和填充
【发布时间】: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/

【问题讨论】:

  • 使用白色实心边框

标签: html css padding


【解决方案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) stackoverflow.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/cssref/css3_pr_background-origin.asp

        【讨论】:

          【解决方案9】:

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

          【讨论】:

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