本文介绍了如何用css绘制一条线并在其上显示文本或图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试使用CSS绘制一条线,并在线的中间显示文字/图片。



  .featured-images {color:#666666; border:2px solid#333333;}  
 < p class =featured-images>特色< / p>  



这是我想做的:







解决方案


将行(:伪元素)放在 span 使用 z-index:-1 ,以便您可以移动文本而不必担心该行。

  .featured-images {position:relative;颜色:#666666; border:2px solid#333333; padding:0 10px 0 30px;}。featured-images span {color:#666666;背景:白色; 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 =特色图片>< span>特色< / span>< / p>  


$ b




复制以下内容:









您可以使用 repeating-linear-gradient / p>

  body {background:#E7EAE3;} featured-images {position:relative ;颜色:#666666; padding:0 10px 0 30px; overflow:hidden;}。features-images span {color:#517575;背景:白色; padding:0 10px;}。featured-images:after {content:''; position:absolute; width:120%;高度:100%;背景:-webkit-repeating-linear-gradient(180deg,#463A3A 10px,#F2F2F2 10px,#F2F2F2 11px,#463A3A 11px,#463A3A 20px)repeat-x;背景:-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 =特色图片>< span>特色< / span>< / p>  


$ b




使用图片而不是文字。



  .featured-images {position:relative;颜色:#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 =特色图片>< span>< / span>< / p>  

$ b

I'm trying to draw a line using CSS and show text/image in the middle of the line.

.featured-images {
  color: #666666;
  border: 2px solid #333333;
}
<p class="featured-images">Featured</p>

This is what I want to do:

and

解决方案

Wrap the text inside a span and use a :pseudo-element for the line.

Position the line(:pseudo-element) behind the span using z-index: -1, so that you could move around the text without having to worry about the line.

.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>


Replicating the following:

You could use repeating-linear-gradient to do this.

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>


Using image instead of text.

.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>

这篇关于如何用css绘制一条线并在其上显示文本或图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 13:40
查看更多