2

I try to create heading like this...

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

This line with a custom image background

HTML :

<h2>Title</h2>

CSS :

h2 {background:url('line.png') repeat-x 15px 10px;}

Result :

enter image description here

Live : http://jsfiddle.net/5G2aq/

I try to repeat this image with X-axis and add some padding into the left.

But it doesnt work, 15px doenst work... or what ?

PS :Try to do with a single element <h2>, not :after or full-long image

Any trick ?

4

1 回答 1

1

这样做，使用:after伪 withcontent: "";并确保使用display: block;，现在我们使用position: absolute;并分配position: relative;给容器元素。最后但并非最不重要的一点是，我们使用overflow: hidden;这样我们就不会弄脏滚动。

演示

h2 {
    position: relative;
    overflow: hidden;
}

h2:after {
    position: absolute;
    height: 2px;
    content: "";
    display: block;
    width: 100%;
    top: 50%;
    left: 60px;
    background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}

来到您的解决方案，您正在使用repeat-x，因此您不会在图像重复时看到轴上的background-position变化x，如果您想采用这种方法，则不应重复。

更好的方法

演示 2或演示 3（使用您的图像）

<div><span>Hello</span></div>

div {
    border-top: 1px solid #000;
    margin: 20px;
    position: relative;
}

div span {
    display: block;
    position: absolute;
    top: -12px;
    background: #fff;
    padding-right: 10px;
}

上述方式将与标题width无关，我会选择这种方式

注意：您可以替换div为h2

于 2013-09-17T10:15:41.613 回答