053288628280
您的当前位置:首页 > 技术支持 > 前端设计 >

网站建设之响应式全屏背景css代码

时间:2014-07-12

网站建设之响应式全屏背景css代码


在本教程中,我们将最简单的技术做一个背景图像完全伸出覆盖整个浏览器窗口。我们将使用CSS background-size属性,不使用JavaScript。

html代码如下
<!doctype html>
<html>
<body>
  ...Your content goes here...
</body>
</html>



css代码如下
body {
  /* Location of the image */
  background-image: url(images/background-photo.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
}

注释最主要 css属性解析
background-size: cover;


本教程还使用媒体设备属性,
@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections */
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

媒体查询设置在max-width:767 px断点,在我们的例子中,这意味着,如果浏览器窗口大于767 px,它将服务于更大的背景图像文件。
  
  使用上述媒体查询的缺点是,如果你调整你的浏览器窗口,例如,1200 px宽640像素宽度(反之亦然),你就会立刻看到一个闪烁而小或大背景图像加载。



下载链接:http://pan.baidu.com/share/link?shareid=2477322698&uk=704941333 密码:cixt
  


 
 

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP