Question

首先，对不起标题，我甚至不知道如何解释，所以我刚刚上传了这张图片：

我需要的是这个，我需要一个宽度为auto的标题（取决于文本）和蓝线占据其余宽度。我是这样做的：

<div class="widgettitlewrapper"><h3 class="widgettitle">HEADER2</h3></div>

.widgettitlewrapper {
    background: url("../img/ntitle2.png") repeat-x scroll left center transparent;

}
.widgettitlewrapper h3.widgettitle {
    background: none repeat scroll 0% 0% #FAF8F8;
}

所以我有一条蓝线，在它的顶部，带有BACKGROUND的标题覆盖了该部分的线条。问题是现在我需要标题是透明的，所以我可以在这个标题下看到这一行。

我该如何解决这个问题？我试图在谷歌和这里搜索，但我甚至不知道要搜索什么......

提前致谢。

Answer 1

只需将此标题替换为background css：

.widgettitlewrapper h3.widgettitle {
    background-color:rgba(0, 0, 0, 0);
}

参见 JSFiddle

Answer 2

您可以使用:before或:after伪元素来绘制边框。

.widgettitle {
    color: blue;
    position: relative;
}

.widgettitle:after {
    content: "";
    border: 1px solid blue;
    position: absolute;
        left: 0;
        top: 50%;
    width: 100%;
    z-index: 1;    
}

以下是fiddle

Answer 3

有一个解决方案，将背景应用于：after伪元素：

.widgettitlewrapper {
    clear:both;
    display:table;
    width: 100%;
}
.widgettitlewrapper h3.widgettitle {
    background: none repeat scroll 0% 0% #FAF8F8;
    background:transparent;
     display: table-cell;
    margin: 0;
}

.widgettitlewrapper:after{
    content: '.';
    text-indent: -9999px;
    background-color: red;
    display: table-cell;
    width: 100%;
}

你只需要改变.widgettitlewrapper的背景：在元素之后。

小提琴：http://jsfiddle.net/oadpunpa/

如何：具有自动宽度和背景线的标题

3 个答案: