如何让hr设计师

Question

想要像这样的 img1

和

IMG2

不知道如何实现这一目标。

Answer 1

我非常确定使用<hr>是而不是建议的方法。你可以试试：

<div><img src='http://i.stack.imgur.com/Llk2U.png'><div>

或使用css类使其更优雅：

＆＃13;

＆＃13;

.whybuyfromus
{
  background: url('http://i.stack.imgur.com/Llk2U.png') no-repeat;
  height: 101px;
  background-size: contain;
}
  

＆＃13;

<div class="whybuyfromus" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

我知道这已经有了一个公认的答案，但我想知道是否可以用CSS制作一个完全响应的版本。我找到了一个使用flexbox的解决方案：

.fancy-hr {
  display: flex;
  background-image:
    url(http://i.imgur.com/ZmheWg5.png),
    url(http://i.imgur.com/ph3e3OT.png);
  background-size: 115px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  height: 37px;
  box-sizing: border-box;
  padding: 0 115px;
}

.fancy-hr:before,
.fancy-hr:after {
  content: "";
  flex: 1;
  background: url(http://i.imgur.com/NBus6Hr.png) repeat-x;
}

.fancy-hr span {
  display: inline-block;
  height: 100%;
  line-height: 37px;
}

.fancy-hr span:before,
.fancy-hr span:after {
  content: "";
  width: 10px;
  height: 100%;
  display: inline-block;
}

.fancy-hr span:before {
  background-image: url(http://i.imgur.com/wMU1oDn.png);
  float: left;
}

.fancy-hr span:after {
  background-image: url(http://i.imgur.com/4Q2el3J.png);
  float: right;
}

<div class="fancy-hr"><span>Text here</span></div>

Answer 3

试试这个：

＆＃13;

＆＃13;

  .hr {
    background-image: url(http://i.stack.imgur.com/Llk2U.png);
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100%;
  }

＆＃13;

<div class="hr" />

＆＃13;

＆＃13;

＆＃13;