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中添加＆＃34; height：200px; ＆＃34;），它只显示一个空矩形。

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

Answer 1

您使用的网址指向网页的链接，而不是图片。点击该页面上的图片，即可获得http://upload.wikimedia.org/wikipedia/commons/e/ee/Mark_Twain_photo_portrait%2C_Feb_7%2C_1871%2C_cropped_Repair.jpg的正确网址。

编辑：考虑下载该图片并从本地网址提供服务（请务必先检查许可证），如果该图片从维基媒体中删除或移动，则不再显示对你而言。

Answer 2

您是从维基百科的媒体查看器中提取的。您需要链接到实际的图像文件。另外，尝试添加一点高度。最后，禁用默认边框也可能是您想要的。

hr {
  height: 100px;
  border: 0;
  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;
}

Answer 3

两个问题

您要关联的图片不是图片网址。实际图片网址为http://upload.wikimedia.org/wikipedia/commons/e/ee/Mark_Twain_photo_portrait%2C_Feb_7%2C_1871%2C_cropped_Repair.jpg。
即使使用正确的网址，默认情况下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 />

为什么我的hr（水平规则）没有显示提供的背景？

3 个答案:

两个问题

实施例