html - 用背景图标分割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/