带有图像的内容分隔符

Question

我必须使用html / css在我的网页中实现此内容分隔符，但我找不到实现。

我有这朵花的.svg和.png图片。你能告诉我这样做的步骤，或者给我一些解释良好的教程的链接。我感谢任何帮助！

Answer 1

Flexbox和一些伪元素使这很简单。

＆＃13;

＆＃13;

span {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
span::before,
span::after {
  content: '';
  flex: 1;
  height: 2px;
  background: teal;
  margin: .5em;
}

＆＃13;

<span><img src="http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg" alt="" /></span>

＆＃13;

＆＃13;

＆＃13;

Related Question

Answer 2

重新审视了典型的人力资源。

您可以使用伪在其上引入图像：

hr {
  position:relative;
  margin:2em 1em;
  color:lighgray;
  }
hr:before {
  content:url(http://i1253.photobucket.com/albums/hh600/fleur-de-lis-xxx/favicon-bright.png);
  position:absolute ;
  text-align:center;
  left:50%;
 background:white;
  z-index:1;
  height:2em;
  width:30px;
  margin:-15px;
  
  }

<hr/>

Answer 3

这是一个使用伪元素:after

的解决方案

.separator { border-bottom: 1px solid #333; position: relative; margin-top: 30px; }
.separator:after {
  content: ""; 
  position: absolute; 
  left: 50%; 
  margin-left: -25px; /* half of the image width */
  top: -20px; 
  background: url('http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg') no-repeat #fff;
  width: 50px;
  height: 50px;
}

<div class="separator"></div>