Question

所以，我有这样的背景：

BODY {
  background-color: #FFFFFF;
  background-image: url(http://i42.tinypic.com/2gxn0gg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; /* width, can be %, px or whatever. */;
  background-size: 70% auto; /* height, can be %, px or whatever. */;
  background-attachment: fixed;
}

http://jsfiddle.net/vUN5A/

当我最小化屏幕（将其缩小）时，我希望它能够保持顶部，或保持最大化的尺寸。我该怎么做呢？有什么想法吗？

Answer 1

除非您确实想要更改背景的大小，否则请勿使用background-size。您告诉它根据body的大小更改背景的大小：当您缩小窗口大小时会发生更改。

http://jsfiddle.net/vUN5A/2/

BODY {background-color: #FFFFFF; background-image: url(http://i42.tinypic.com/2gxn0gg.jpg); background-repeat: no-repeat;background-position: center;}

Answer 2

在您列出的描述中，您可以使用“％，px，whatever”，但这些实际上会做不同的事情。 “％”是动态的，这意味着它受屏幕大小或浏览器窗口的影响。另一方面，“px”是静态的，并且不管屏幕大小如何都不会改变。

因此，如果您不想更改图像的大小，则不应使用“％”。改为使用像素。

Answer 3

使用width:auto代替background size

 BODY {
background-color: #FFFFFF;
background-image: url(http://i42.tinypic.com/2gxn0gg.jpg);
background-repeat: no-repeat;
background-position: center; 
width:auto; 
 }

这是DEMO

在使屏幕变小时，CSS保持背景相同？

3 个答案: