文字兩側加橫線的解決方案

王英琦發表於2019-01-18

文字兩側加橫線的需求你遇到過嗎?在參與的專案中我遇到過這種需求,總結了一下,目前分為兩種:

一,文字所在的背景是純色,單一顏色;

文字兩側加橫線的解決方案

二,文字所在背景是花色,或者是背景圖片

文字兩側加橫線的解決方案

給你一些時間,思考一下:

文字兩側加橫線的解決方案

腦海閃過了什麼?定位,浮動,背景圖片,偽元素。。。還是大腦一片空白?

條條大路通羅馬,相信給你足夠的時間,靜靜的坐在開著空調的房間裡,你會得到自己的實現方法。

先看第一種,背景純色的實現方案。

用的一個方法是用一個空的標籤,來寫這條橫線。當然也可以用背景圖,切一箇中間透明,兩邊白條的圖片。也可以使用偽元素。before after前後夾擊。

在背景為圖片的時候使用了偽元素這種方法,個人感覺偽元素這個東西真的是太強大了。

廢話不說上程式碼:

HTML:

<div class="onpure_bg">
    <h2 class="onpure">
        <span class="onpure_title">標題在此</span>
    </h2>
    <span class="line"></span>

</div>
複製程式碼

CSS:

/*純背景實現原理程式碼*/
.onpure_bg{
    background: #ccc;
    width: 700px;
    height: 400px;
    margin:0 auto;
    background-size: cover; 
    position: relative;
}
.onpure{
    position: absolute;
    top: 70px;
    left:50%;
    width: 150px;
    margin-left: -75px;
    margin-top: 50px; 
    z-index: 1
}
.onpure_title{
/*關鍵點:設定和背景顏色一樣的顏色。*/
    background:#ccc;
    padding:0px 20px; 
}
.line{
    display: inline-block;
    width: 500px;
    height: 0px;
    border: 2px solid #fff;
    position: absolute;
    top:130px;
    left: 50%;
    margin-left: -250px;
}

複製程式碼

程式碼解析:

把標題和線條定位左右居中,上下靠上部分,用z-index將文字層級放置線條上方,在給標題使用和背景色一樣的背景色。padding設定左右值撐開空隙。

It is so easy!

再來看背景為圖片的實現方法,很顯然,上邊的方法取了個巧,利用背景色一致看不出差別。換成一張有複雜的背景圖案的圖片,這種方法就失效,我們藉助偽元素來實現。

程式碼

HTML

<div class="onimg_bg">
    <h2 class="onimg">
        <span class="onimg_title">標題在此</span>
    </h2>
</div>
複製程式碼

CSS

/*背景圖片實現原理程式碼*/

.onimg_bg{
    background: none no-repeat;
    width: 700px;
    height: 400px;
    margin:0 auto;
    background-size: cover; 
    position: relative;
    margin-bottom: 20px;
}

.onimg{
    position: absolute;
    top: 70px;
    left:50%;
    width: 600px;
    margin-left: -300px;
    text-align: center;
}
/*偽元素實現*/
.onimg_title:before{
    display: inline-block;
    position: relative;
    top:-7px;
    right: 20px;
    content: "";
    width: 200px;
    height: 0px;
    border: 2px solid #fff;
}
.onimg_title:after{
    display: inline-block;
    position: relative;
    top:-7px;
    left: 20px;
    content: "";
    width: 200px;
    color: #fff;
    height: 0px;
    border: 2px solid #fff;
}

複製程式碼

偽元素這種方法,也很簡單,剛遇到的時候也是糾結了一會兒,有時候是思路的問題,想到這個方法,問題就迎刃而解了。

程式碼解析:

需要注意的是使用偽元素content屬性必不可少,然後給偽元素塊級化,就可以像設定正常的元素一樣設定你想要的樣式了,在這裡設定了一個沒有高度,寬200px的長條,通過border控制高;

也可以通過設定背景圖片background: none no-repeat,代替border實現

針對這種需求,目前只想到偽元素實現,如果您有更好的方法,歡迎留言。

文字兩側加橫線的解決方案

相關文章