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

【问题标题】：How can I add an image line under h2 element?如何在 h2 元素下添加图像线？
【发布时间】：2018-02-06 23:08:41
【问题描述】：

我想在每个 h2（某种设计线）下放置一个图像。当我使用 h2:after 时，图像会显示，但在调整窗口大小后，图像不会调整宽度，因此会破坏网站。你能帮助我吗？图片的分辨率为 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;
}

【问题讨论】：

使用 mediaquery 和 2 种不同尺寸的图片？

标签： html css image

【解决方案1】：

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

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

与上面一样，但您需要调整值直到看起来不错。

【讨论】：

【解决方案2】：

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

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

或者改用<hr /> 元素并用你想要的图像设置它的背景。

【讨论】：