css - 高密度可重复背景

Question

所以我有这个用于智能手机的网页。在标题中，我有通常的元视口(viewport):

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

和一个普通的 css 包括:

<link rel="stylesheet" href="default.css" type="text/css" />

使用标准的 CSS，例如:

.ui-icon-menu{
    background-image: url(images/icon-menu-normal.png)!important;
}

一切正常。对于像 iPhone 4 这样的高密度显示器，它可以很好地缩放，但我认为我可以让它看起来更好，所以我包含了一个用于高密度的 css:

<link rel='stylesheet' href='highdensity.css'
  media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' />

在这个 css 中，我可以像这样覆盖 css:

.ui-icon-menu{
    background-image: url(images/icon-menu-normal@2x.png)!important;
    background-size: 100%;
}

工作很顺利。但请注意 background-size: 100%;。没有它，背景图像将缩放到 200%。

我的问题是可重复的图像？我能为他们做什么？我不能使用 background-size: 100%; 因为它会拉伸(stretch)图案而不是使用它。

Answer 1

div{background-size: 5px 5px;} 使用 px 而不是 %。