【问题标题】:Add a margin to the left of a background image在背景图像的左侧添加边距
【发布时间】:2013-12-03 03:26:41
【问题描述】:

编辑:在这里找到答案 CSS <hr> right aligned next to text 感谢 Alien 先生

我正在尝试制作如下所示的标题标题

Title -------------------------------------------------

我有一张图片打算用作它的背景。

但是当我添加它时,我不确定如何定位它,这样它就不会像现在那样与文本重叠。

如下所示

-T-i-t-l-e---------------------------------------

HTML

<div class="content-header"><p>Check Out</p></div>

CSS/LESS

.content-header {
width: 90%;
background: url(../images/bulletbg.png) repeat-x center;
margin-top: 10px;
    p {
        margin: 0;
        padding: 0;
    }
}

【问题讨论】:

  • 你在找这个吗? stackoverflow.com/a/19582573/1542290
  • 您的问题不清楚。你是问如何定位背景图片?
  • 虽然 Mr. Alien 的链接指向了正确的解决方案,但您能否直接使用网络字体键入项目符号?
  • 先生。 Alien 的链接对我有用,谢谢

标签: html css less


【解决方案1】:

尝试使用background-position。默认情况下,背景将从左上角开始,但使用它可以更改起始位置。您可以通过多种方式使用它

background-position: 20% 0; 

或者

background-position: 10px 0; 

玩弄它以使其正确

【讨论】:

    【解决方案2】:

    试试 background-position 属性。

    background-position: 100px center;
    

    MDN Background-position

    【讨论】:

      【解决方案3】:

      尝试将标题和背景放在单独的 div 中,然后使用“display:inline”或“display:inline-block”设置 div 的样式 - 具体取决于您希望它的行为方式。

      【讨论】:

        【解决方案4】:

        底线是这个,你应该有一个标题

        <h1 style="width: auto">your title</h1><div class="yourbackgroundimage"></div>
        

        这样你的标题就不会被超越。

        【讨论】: