文字兩側加橫線的需求你遇到過嗎?在參與的專案中我遇到過這種需求,總結了一下,目前分為兩種:
一,文字所在的背景是純色,單一顏色;
二,文字所在背景是花色,或者是背景圖片
給你一些時間,思考一下:
腦海閃過了什麼?定位,浮動,背景圖片,偽元素。。。還是大腦一片空白?
條條大路通羅馬,相信給你足夠的時間,靜靜的坐在開著空調的房間裡,你會得到自己的實現方法。
先看第一種,背景純色的實現方案。
用的一個方法是用一個空的標籤,來寫這條橫線。當然也可以用背景圖,切一箇中間透明,兩邊白條的圖片。也可以使用偽元素。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
實現
針對這種需求,目前只想到偽元素實現,如果您有更好的方法,歡迎留言。