你如何使CSS平铺/重复背景保持锐利的视网膜屏幕？(How do you make a css tiled / repeated background stay sharp on a retina screen?)

在网页上，我使用CSS将所有图像缩放了50％，以使它们在视网膜屏幕上显得锐利，但对于平铺图像无效，似乎无法缩放平铺背景图像，以至于它会在视网膜屏幕上变得尖锐而不是两倍。 对不起，如果这个问题很混乱。

On the web page, I'm scaling all of my images by 50% with CSS to make them look sharp on retina screens but that doesn't work for tiled images, there seems to be no way to scale a tile background image so that it will be sharp and not doubled sized on the retina screens. Sorry if this question is confusing.

最满意答案

设置background-size: 150px 150px; 对于一个300x300的背景图像似乎有诀窍。 请注意background-size: 50%; 不会做你所期望的，因为它将宽度和高度设置为父容器的50％。

Setting background-size: 150px 150px; for a 300x300 background image seems to do the trick. Note that background-size: 50%; will not do what you might expect, as it sets the width and height to 50% of the parent container.

你如何使CSS平铺/重复背景保持锐利的视网膜屏幕？(How do you make a css tiled / repeated background stay sharp on a retina screen?)

在网页上，我使用CSS将所有图像缩放了50％，以使它们在视网膜屏幕上显得锐利，但对于平铺图像无效，似乎无法缩放平铺背景图像，以至于它会在视网膜屏幕上变得尖锐而不是两倍。 对不起，如果这个问题很混乱。

On the web page, I'm scaling all of my images by 50% with CSS to make them look sharp on retina screens but that doesn't work for tiled images, there seems to be no way to scale a tile background image so that it will be sharp and not doubled sized on the retina screens. Sorry if this question is confusing.

最满意答案

设置background-size: 150px 150px; 对于一个300x300的背景图像似乎有诀窍。 请注意background-size: 50%; 不会做你所期望的，因为它将宽度和高度设置为父容器的50％。

Setting background-size: 150px 150px; for a 300x300 background image seems to do the trick. Note that background-size: 50%; will not do what you might expect, as it sets the width and height to 50% of the parent container.