HR标签中间的图像

Question

我需要与此hr标签类似的东西

hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

JSFiddle

但我需要一个图像而不是ASCII符号。我试过制作内容“”，背景是背景图片，但我没有运气。

Answer 1

而不是

content: '';

使用url(<url>)表示法：

content: url(http://i.stack.imgur.com/yUzqW.png);

hr.style-eight {
  margin-top: 2em;
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
hr.style-eight:after {
  content: url(http://i.stack.imgur.com/yUzqW.png);
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}

<hr class="style-eight" />

外部JS Fiddle demo，用于实验。

参考文献：

• content property (MDN)。

Answer 2

http://jsfiddle.net/gfweqd7y/1/

content: url(image.what ever);