形象型人力资源

Question

我正试图实现一些尽可能接近下面的图像。

​

目前，我在下面的代码中得到了下面的代码，并且似乎无法让它做我需要的事情。

当前造型：

​

我的CSS：

hr:after { 
    background: url('../img/green_leaf.png') no-repeat top center;
    content: "";
    display: block;
    height: 18px; /* height of the ornament */
    position: relative;
    top: -9px; /* half the height of the ornament */
    border: 0;
    color: #d7d7d7;
}

我想加厚线条，如果可能的话，在图像周围添加空间(不让green_leaf.png有一个白色bg)。

Answer 1

如何在hr元素中设置图像，并使用:before和:after创建行？这样，您就不必在图像上设置背景来掩盖一行。

工作实例：

​

hr { 
    background: url('http://i.stack.imgur.com/37Aip.png') no-repeat top center;
    background-size: contain;
    display: block;
    height: 18px;
    border: 0;
    position: relative;
}
hr:before,
hr:after {
    content: '';
    display: block;
    position: absolute;
    background: #d7d7d7;
    height: 2px;
    top: 8px;
}
hr:before {
    left: 0;
    right: 50%;
    margin-right: 10px;
}
hr:after {
    right: 0;
    left: 50%;
    margin-left: 10px;
}

<hr />

​

Answer 2

您可以在这篇文章以图像/字符为中心中找到答案

我修改了它，我得到了这个

hr {
  no-repeat top center;
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
}

hr:after {
  content: ""; /* section sign */
  background: url('smiley.gif') no-repeat top center;
  display: inline; /* for vertical centering and background knockout */
  background-color: white; /* same as background color */
  padding: 0 2em; /* size of background color knockout */
}

注意padding: 0 2em;和background-color: white;。

Answer 3

如果您像这样设置它，并在图像上指定背景颜色以匹配页面背景中的任何内容(可能是白色的)，那么它看起来会很好：

HTML

<div class='hr'>
    <hr>
    <img src='../img/green_leaf.png' alt=''>
</div>

CSS

hr {
    border:none;
    border: 1px solid #d7d7d7;
}

.hr { 
    text-align: center;
}

.hr img {
    position: relative;
    top: -18px;
    background:white;
    padding:0 5px;
}

结果：

​

小提琴