如何用css畫一條線並在上面顯示文本或圖像

6

緊裹span中的文本，並使用：僞元素爲線。

使用z-index: -1將行（：僞元素）定位在span後面，以便您可以在文本中移動而不必擔心行。

.featured-images { 
 
    position: relative; 
 
    color: #666666; 
 
    border: 2px solid #333333; 
 
    padding: 0 10px 0 30px; 
 
} 
 
.featured-images span { 
 
    color: #666666; 
 
    background: white; 
 
    padding: 0 10px; 
 
} 
 
.featured-images:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    background: #666666; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    z-index: -1; 
 
}

<p class="featured-images"><span>Featured</span></p>

複製以下：

enter image description here

您可以使用repeating-linear-gradient來做到這一點。

body { 
 
    background: #E7EAE3; 
 
} 
 
.featured-images { 
 
    position: relative; 
 
    color: #666666; 
 
    padding: 0 10px 0 30px; 
 
    overflow: hidden; 
 
} 
 
.featured-images span { 
 
    color: #517575; 
 
    background: white; 
 
    padding: 0 10px; 
 
} 
 
.featured-images:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 120%; 
 
    height: 100%; 
 
    background: -webkit-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x; 
 
    background: -moz-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x; 
 
    background-size: 10px 31px; 
 
    margin-left: -30px; 
 
    transform: skew(-45deg); 
 
    left: 0; 
 
    z-index: -1; 
 
}

<p class="featured-images"><span>Featured</span> 
 
</p>

使用圖像而不是文字。

.featured-images { 
 
    position: relative; 
 
    color: #666666; 
 
    border: 2px solid #333333; 
 
    padding: 0 10px 0 30px; 
 
} 
 
.featured-images span { 
 
    display: block; 
 
    width: 80px; 
 
    height: 13px; 
 
    background: url(http://lorempixel.com/80/13) no-repeat white 10px 0; 
 
    padding: 0 10px; 
 
} 
 
.featured-images:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    background: #666666; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    z-index: -1; 
 
}

<p class="featured-images"><span></span></p>

來源

2015-01-11 18:15:08

+0

是非常酷謝謝你！另外我看到任何時間這樣的事情。我真的很想知道你是如何做到的.http：//1.bp.blogspot.com/-781njLjo92I/VLK_uDingSI/AAAAAAAAAEU/Wfp6fBuuzp0/s1600/11-01-2015%2B20-21-37.jpg我的意思是，有時我會看到與下降斜槓 – Dragut

+0

@Bergmann - 檢查更新的答案。 –

+0

謝謝！這足夠了 – Dragut

3

喜歡的東西THI S' JSFiddle

CSS：

.featured-images { 
    color: #666666; 
} 
p span { 
    margin:0;padding: 0 10px; 
    background: #FFFFFF; 
    display: inline-block; 
} 
p { 
    padding-left: 20px; 
    position: relative; 
    z-index: 2; 
} 
p:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
    border-top: solid 1px #666666; 
    z-index: -1; 
}

來源

2015-01-11 18:10:29

+0

是非常好的，謝謝！另外我看到任何時間這樣的事情。我真的不知道你是怎麼做到的.http：//1.bp.blogspot.com/-781njLjo92I/VLK_uDingSI/AAAAAAAAAEU/Wfp6fBuuzp0/s1600/11-01-2015%2B20-21-37.jpg – Dragut

2

演示1

enter image description here

:root{padding: 40px} 
 
p{ 
 

 
    position: relative; 
 
    margin:40px auto;padding:0 10px; 
 
    background:white; 
 
    display:inline-block; 
 
} 
 
p:before,p:after{ 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    right:0 
 
} 
 
p:before{ 
 
    top:-4px; 
 
    left: -24px; 
 
    height: 24px; 
 
    width: 480px; 
 
    border:solid 1px #666666 
 
} 
 
p:after{ 
 
    top: 50%; 
 
    width: 466px; 
 
    left: -16px; 
 
    border-top: solid 1px #666666 
 
}

<p class="featured-images">Featured</p>

使用僞元素

:root{padding: 40px} 
 
p{ 
 

 
    position: relative; 
 
    margin:40px auto;padding:0 10px; 
 
    background:white; 
 
    display:inline-block; 
 
} 
 
p:before,p:after{ 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    left:-14px; 
 
    right:0; 
 
    width: 480px 
 
} 
 
p:before{ 
 
    top:-4px; 
 
    height: 24px; 
 
    border:solid 1px #666666 
 
} 
 
p:after{ 
 
    top:50%; 
 
    border-top:solid 1px #666666 
 
}

<p class="featured-images">Featured</p>

演示2

p{ 
 

 
    position: relative; 
 
    margin:0;padding:0 10px; 
 
    background:white; 
 
    display:inline-block; 
 
} 
 

 
p:after{ 
 
    content:""; 
 
    position:absolute; 
 
    top:50%; 
 
    left:-14px; 
 
    right:0; 
 
    width: 100vw; 
 
    border-top:solid 1px #666666; 
 
    z-index:-1; 
 
}

<p class="featured-images">Featured</p>

更新

enter image description here

:root{padding: 40px} 
 
p{ 
 

 
    position: relative; 
 
    margin:40px auto;padding:0 10px; 
 
    background:white; 
 
    display:inline-block; 
 
} 
 
p:before,p:after{ 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    right:0 
 
} 
 
p:before{ 
 
    top:-4px; 
 
    left: -24px; 
 
    height: 24px; 
 
    width: 480px; 
 
    border:solid 1px #666666; 
 
    background-color: gray; 
 
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.5) 2px, rgba(255,255,255,.5) 6px) 
 
} 
 
} 
 
p:after{ 
 
    top: 50%; 
 
    width: 466px; 
 
    left: -16px; 
 
    border-top: solid 1px #666666 
 
}

<p class="featured-images">Featured</p>

來源

2015-01-11 18:14:59

+0

是的非常酷謝謝你！另外我看到任何時間這樣的事情。我真的很想知道你是如何做到的.http：//1.bp.blogspot.com/-781njLjo92I/VLK_uDingSI/AAAAAAAAAEU/Wfp6fBuuzp0/s1600/11-01-2015%2B20-21-37.jpg我的意思是，有時我會看到與隨着打下右斜槓 – Dragut

+0

使用背景漸變http://jsfiddle.net/ahegoa8q/1/ –

0

結果http://jsfiddle.net/p8jdzqvL/embedded/result/

<div style="height: 2px; background-color: black; text-align: center"> 
     <span style="background-color: white; position: relative; top: -0.5em;"> 
     Stay Connected 
     </span> 
    </div>

來源

2015-01-20 12:17:35

如何用css畫一條線並在上面顯示文本或圖像

回答

相關問題