分裂css边框与背景图标

Question

我正在尝试用背景图像划分边框。 我不知道这是否可能这样。 希望有人可以帮我找到一个很好的清洁方法来实现这一目标。

我正试图找到最底层的，最重要的是我现在所拥有的。

.tinybanner h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    border-bottom: 1px solid $green;
    display: inline-block;
    @include adjust-font-size-to(24px);
    background: url('images/tinybanner.png') center bottom no-repeat;
}

Answer 1

通过使用伪选择器:after ，您可以在每个h1之后添加一个元素：

h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    border-bottom: 1px solid green;
    display: inline-block;
    position: relative;
}
h1:after {
    position: absolute;
    left: 50%; /* center the element */
    margin-left: -15px; /* shift left by (width+border)/2 */
    display: block;
    content: ''; 
    width: 20px;
    height: 20px;
    background: green; /* this can of course be a background image, too */
    border: 10px solid white; /* adds a gap to the left and right */
}

我之所以喜欢这种方法，是因为它很好地降级了。 如果你的浏览器不支持:after伪选择器，你仍然会在标题下留下边框（因为它是在h1上设置的，而不是伪元素）并且看不到悬空的背景图像（因为它设置在h1:after ）。

http://jsfiddle.net/stevemchey/YFXGa/

Answer 2

如何使用:after与左右边框sudo的元素：

.tinybanner h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    display: inline-block;
    @include adjust-font-size-to(24px);
    background: url('http://placekitten.com/10/20') center bottom no-repeat;
}

.tinybanner h1:after {
    height:1px;
    content:'';
    display:block;
    border-left: 40px solid #00ff00; 
    border-right:40px solid #00ff00;
}

http://jsfiddle.net/bhlaird/XSdbs/