css怎样让背景充满整个屏幕
HTML
  <!doctype html>
<html>
<body>
...Your content
</body>
</html>
  给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。
  其实，该⽅案对所有的块级容器都可以⽣效。块级容器的宽⾼是动态的，那么背景图将⾃动伸缩，充满整个容器。
  CSS body标签的样式如下：
  body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、⽔平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容⾼度⼤于图⽚⾼度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器⼤⼩伸缩 */
background-size: cover;
/
* 设置背景颜⾊，背景图加载过程中会显⽰背景⾊ */
}
  上⾯最重要的⼀条就是：
  background-size: cover;
  这样浏览器就会按⽐例缩放背景图直⾄背景图宽⾼不⼩于容器的宽⾼（在上⾯的例⼦中，就是body标签）。
  这⾥需要注意的⼀点就是：如果背景图⼩于body标签的尺⼨（例如在⾼分辨率显⽰器上，或页⾯内容特别多时），浏览器会拉伸图⽚。都知道，当把⼀个图⽚拉伸时，图⽚会变模糊。  因此，在选择背景图时，要特别注意尺⼨。为了照顾到⼤尺⼨屏幕，demo⾥⽤的图⽚尺⼨为5498px * 3615px 。
  同时，为了让背景图始终相对于viewport居中，声明了：
  background-position: center center;
  上⾯的规则会把背景图缩放的原点定位到viewport的中⼼。
  接下来需要解决的问题是：当内容的⾼度⼤于viewport的⾼度时，会出现滚动条。希望背景图始终相对于viewport固定，即使⽤户滚动时也是⼀样。
  解决办法就是：
css始终显示滚动条  background-attachment: fixed;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。