利用css中 background-size:cover  填充整个viewport

注意:

一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真;

但是在移动端使用如此大的图片完全是浪费资源,大图会导致加载变慢,尤其是在移动网络下。

在移动端可以另设一张相对小一点的图片使用媒体查询

body{
/* 加载背景图 */
background-image: url(images/background-photo.jpg); /* 背景图垂直、水平均居中 */
background-position: center center; /* 背景图不平铺 */
background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed; /* 让背景图基于容器大小伸缩 */
background-size: cover; /* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}

  

css实现响应式全屏背景的更多相关文章

  1. CSS实现响应式全屏背景图

    body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...

  2. jQuery10种不同动画效果的响应式全屏遮罩层

    遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...

  3. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  4. swiper实现响应式全屏自动轮播

    html: <!--轮播 --> <div class="Excellent_swi"> <div class="swiper-contai ...

  5. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  6. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  7. HTML5全屏背景视频与 CSS 和 JS(插件或库)

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  8. 全屏背景:15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  9. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

随机推荐

  1. Apache Mina原理及典型例子分析

    Apache Mina ,一个高性能 Java 异步并发网络通讯框架.利用 Mina 可以高效地完成以下任务: TCP/IP 和 UDP/IP 通讯 串口通讯 VM 间的管道通讯 SSL/TLS JX ...

  2. HDU 5607 graph 矩阵快速幂 + 快速幂

    这道题得到了学长的助攻,其实就是一个马尔科夫链,算出一步转移矩阵进行矩阵快速幂就行了,无奈手残 这是我第一回写矩阵快速幂,写的各种毛病,等到调完了已经8点44了,交了一发,返回PE,(发现是少了换行) ...

  3. [BILL WEI]SQL 存储过程学习

    --查看数据库exec sp_databases ;--查看表exec sp_tables ;--查看列exec sp_columns WMS_ASN;--查看索引exec sp_helpindex ...

  4. Flash 导出图片和声音

    命令文件 PolarBear_jsfl.zip Flash Professional 编辑器命令,用来导出 flash 库中的图片和声音 使用步骤: 1. 首先下载 PolarBear_jsfl.zi ...

  5. js自定义排序

    摘要 有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据name 或者 id的值来排序,这里有个风 ...

  6. bzoj 2716 天使玩偶(CDQ分治,BIT)

    [题目链接] http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=29234 [题意] 询问当前点与已知点的最小曼哈顿距离. [思路 ...

  7. 【暑假】[深入动态规划]UVa 10618 Tango Tango Insurrection

    UVa 10618 Tango Tango Insurrection 题目: Problem A: Tango Tango Insurrection You are attempting to lea ...

  8. Clean Code – Chapter 2: Meaningful Names

    Use Intention-Revealing Names The name should tell you why it exists, what it does, and how it is us ...

  9. mysql 清空表的两种方法

    一.Delete DELETE FROM `table`; 二.Truncate TRUNCATE `table`; 第一种方法其实就是去掉where条件,没有了条件,也就是删除掉表里面的所有记录了: ...

  10. CentOS 5.6 安装Oracle Java 和 Eclipse

    1.卸载原有OpenJDK 1. 使用java  -version查看当前Java版本信息 2. 使用rpm  -qa  |  grep  java 列出所有被安装的java rpm package ...