css - 使用背景大小作为图像分隔符的正确方法？

Question

我需要将 hr 转换为图像分隔符，并且我正在使用以下代码：

<hr class="sep">

和

hr.sep {
background-image: url(/core/skins/Ninja/divider.gif);
background-size: 80px 38px;
background-repeat: repeat-x;
visibility: initial;
height: 38px;
background-color: transparent;

不幸的是，它只显示了一个大量拉伸的图像，如下所示：http: //i.imgur.com/MyXa07k.png

显示图像的正确方法是什么，它看起来像这样：http: //i.imgur.com/zbXujxP.png

Answer 1

OP评论后更新答案

只需将您的更改background-size: 80px 38px;为background-size: auto 38px;或background-size:contain;

您可能需要使用浏览器供应商来跨浏览器它

请参阅下面的两个片段，结果相同：

背景大小：包含

hr.sep {
  background-image: url(http://t2.ftcdn.net/jpg/00/20/03/43/400_F_20034366_DPxCA1ryMUc73AcDi3u0WU6HUX94i8Rl.jpg);
  background-size:contain;  
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-repeat: repeat-x;
  visibility: initial;
  height: 38px;
  background-color: transparent;

<hr class="sep">

背景尺寸：自动 38px

hr.sep {
  background-image: url(http://t2.ftcdn.net/jpg/00/20/03/43/400_F_20034366_DPxCA1ryMUc73AcDi3u0WU6HUX94i8Rl.jpg);
  background-size:auto 38px;  
  -webkit-background-size: auto 38px;
  -moz-background-size: auto 38px;
  -o-background-size: auto 38px;
  background-repeat: repeat-x;
  visibility: initial;
  height: 38px;
  background-color: transparent;

<hr class="sep">

关于这里的更多信息background-size

Answer 2

尝试

background-size: contain;

这应该够了吧。该contain关键字使浏览器按比例调整高度和宽度以适合标签内。

Answer 3

它应该是

background-size: 0 38px;