将背景大小用于图像分隔符的正确方法

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;

不幸的是，它只是显示了一个巨大的拉伸图像，就像这样：https://i.stack.imgur.com/GEIka.png

显示图像的正确方式是什么，使其看起来像这样：https://i.stack.imgur.com/6izqU.png

Answer 1

OP注释后更新的答案

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

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

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

背景大小：包含

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;