html - 为什么我的 hr(水平规则)不显示提供的背景？

Question

我有这个 HTML:

<hr />

...还有这个 CSS:

hr {
  background: url("http://commons.wikimedia.org/wiki/Mark_Twain#/media/File:Mark_Twain_photo_portrait,_Feb_7,_1871,_cropped_Repair.jpg") no-repeat center center;
}

但是hr只显示一条正常的线，没有图像。即使我增加了 hr 的高度(通过向 CSS 添加“height: 200px;”)，它也只显示一个空的矩形。

我需要做什么才能显示图像？

Answer 1

两个问题

1. 您链接到的图片不是图片网址。实际图像 URL 是 http://upload.wikimedia.org/wikipedia/commons/e/ee/Mark_Twain_photo_portrait%2C_Feb_7%2C_1871%2C_cropped_Repair.jpg。
2. 即使使用正确的 URL，默认情况下 hr 元素也没有高度。它们只有 1 像素宽的边框。为了显示图像，您需要为 hr 元素提供一些 height。

例子

hr {
  background: url("http://upload.wikimedia.org/wikipedia/commons/e/ee/Mark_Twain_photo_portrait%2C_Feb_7%2C_1871%2C_cropped_Repair.jpg") no-repeat center center;
  height: 100px;
}

<hr />