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;

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

使用相同的结果，查看两个代码片段：

背景尺寸：含有

＆＃13;

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;

＆＃13;

<hr class="sep">

＆＃13;

background-size：auto 38px

＆＃13;

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;

＆＃13;

<hr class="sep">

＆＃13;

有关background-size here

的更多信息

Answer 2

尝试

background-size: contain;

应该做的伎俩。 contain关键字使浏览器调整高度和宽度，使其与标记内部的比例相适应。

Answer 3

应该是

background-size: 0 38px;

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

3 个答案:

背景尺寸：含有

background-size：auto 38px