Question

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

我正在尝试制作一个类似于以下

的标题标题

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

Answer 1

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

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

这样你就不会超出你的头衔。

Answer 2

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

Answer 3

尝试使用background-position属性。

background-position: 100px center;

MDN Background-position

Answer 4

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

background-position: 20% 0;

或者

background-position: 10px 0;

玩弄它以使其正确

在背景图像的左侧添加边距

4 个答案: