如何在h2元素下添加图像线？

Question

我想在每个h2（某种设计线）下放置一个图像。当我使用h2：之后，图像将显示，但在调整窗口大小后，图像不会调整宽度，因此它会破坏网站。你能帮助我吗？图像的分辨率为730px x 20px。

我想要的是什么：
http://i60.tinypic.com/14buc0z.png

调整大小时出现问题，内容图片的宽度仍然是100％= 730px：
http://i62.tinypic.com/2eywa44.png

我的代码：

h2 {
  padding: 0;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
}

h2:after {
  content: url(images/separator.png) center;
  display: block;
}

Answer 1

使用background代替伪元素对我来说是更好的选择。

h2 {
  background: url("images/separator.png") center bottom no-repeat;
  padding-bottom: 20px;
}

如上所述，但您需要调整值，直到看起来不错。

Answer 2

您可以尝试使用H2本身的背景：

h2 {
 background: url(images/separator.png) center bottom no-repeat;
}

或者使用<hr />元素，并将其背景设置为您想要的图像。