Question

所以我有这个智能手机网页。在标题中我有通常的元视口：

<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%;因为它会拉伸模式而不是使用它。

Answer 1

div{background-size: 5px 5px;}使用px代替%。

高密度可重复背景

1 个答案: