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;
}

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

  1. css实现响应式全屏背景

    利用css中 background-size:cover  填充整个viewport 注意: 一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真: 但是在移动端使用 ...

  2. CSS之全屏背景图

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

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

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

  4. css设置全屏背景图,background-size 属性

    在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

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

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

  6. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

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

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

  8. unity中全屏背景图缩放

    using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...

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

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

随机推荐

  1. Android 打造自己的ImageLoader

    Android 打造自己的ImageLoader 学习和参考 Android开发艺术探索 https://blog.csdn.net/column/details/15318.html 郭霖大神的Gl ...

  2. 运营商DNS系统安全解决方案

    DNS系统面临的主要风险 目前,DNS面临的安全问题主要可以分为三类:DNS欺骗攻击.拒绝服务攻击.系统漏洞,下文将分别进行介绍.  DNS欺骗攻击 当一个DNS服务器遭到欺骗攻击,使用了来自一个恶 ...

  3. POJ 2417 Discrete Logging BSGS

    http://poj.org/problem?id=2417 BSGS 大步小步法( baby step giant step ) sqrt( p )的复杂度求出 ( a^x ) % p = b % ...

  4. LOJ.6282.数列分块入门6(块状链表/分块)

    题目链接 1.分块(vector)+重构 //直接上vector(本机还是比较慢的...) 某块size较大时O(n)重构 //注意细节 #include <cmath> #include ...

  5. Java并发程序设计(四)JDK并发包之同步控制

    JDK并发包之同步控制 一.重入锁 重入锁使用java.util.concurrent.locks.ReentrantLock来实现.示例代码如下: public class TryReentrant ...

  6. error MSB3073 解决办法

    发现拷贝命令编译错误,查看输出列表发现时无法找到相应的路径. 1.顺着这个思路第一个想到的是中文路径的问题,先修改了盘符的中文名称,发现还是无法解决具体的问题. 2.后来反复查阅网上的资料,发现帮助并 ...

  7. 潭州课堂25班:Ph201805201 第八课:函数基础和函数参数 (课堂笔记)

    1, 函数定义 def fun(): print('测试函数') fun() #调用函数 return 运行函数返回值 def fun(): name = [1,3,4,5] return name[ ...

  8. java泛型-自定义泛型方法与类型推断总结

    下面是自定义泛型方法的练习: package com.mari.generic; import java.util.ArrayList; import java.util.Collection; im ...

  9. Java全栈程序员之02:Ubuntu下Java环境安装、配置、测试

    在上文讲完之后,我们手里的ubuntu只能算是一个上网机,什么也干不了,本篇我们将折腾它为开发机. 这里,我们这里假定你对linux体系是初级选手,所以本篇会讲的啰嗦一点,高手就出门左转吧. 1.安装 ...

  10. linux网络设备—PHY

    一.结构体 1.PHY设备 struct phy_device { struct phy_driver *drv; //PHY设备驱动 struct mii_bus *bus; //对应的MII总线 ...