<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        *{margin:0px; padding:0px;}

        a{height:500px; display:block;}

        .box{

			position:relative;

			height:600px; /* 此为元素背景图像实际高度 X 元素背景图像个数 */

			width:1000px;

			margin:0 auto;

			background-repeat:no-repeat;

			background-position:center center;

			background-attachment:fixed; /* 使背景图像相对于窗体固定 */

			background-size:cover; /* 取值auto | cover | contain */

			/* 背景图像的真实大小 */

			/* 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器 */

			/* 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内 */

			overflow:hidden;

			text-align:center;

		}

		.box-1{background-image:url(images/p1.jpg);}

		.box-2{background-image:url(images/p2.jpg);}

		.box-3{background-image:url(images/p3.jpg);}

		.box-4{background-image:url(images/p1.jpg);}

		.box-5{background-image:url(images/p2.jpg);}

		.box-6{background-image:url(images/p3.jpg);}

    </style>

</head>

<body>

<a class="box box-1" id="a1">a1</a>

<a class="box box-2" id="a2">a2</a>

<a class="box box-3" id="a3">a3</a>

<a class="box box-4" id="a4">a4</a>

<a class="box box-5" id="a5">a5</a>

<a class="box box-6" id="a6">a6</a>

</body>

</html>

点击下载附件

css背景全屏-视差的更多相关文章

  1. CSS之全屏背景图

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

  2. body全屏css/网页全屏设置/全屏样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. css设置全屏背景图，background-size 属性

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

  4. css 设置全屏背景图片

    <div id="div1"><img src="img.jpg" /></div> div#div1{ position: ...

  5. 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  6. 关于fullpage.js 和animate.css制作全屏简单大方的首页

    附上源码: html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示（可自动切换背景）

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. CSS背景background图片

    一.CSS背景background图片   -   TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...

  9. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

随机推荐

  1. CSDN学院升级公告

    CSDN学院将于2015年8月5日凌晨00:00-10:00进行停站升级,升级期间会影响大家的正常訪问和操作.给各位用户带来的不便敬请谅解. 升级结束后有不论什么问题请发邮件到webmaster@cs ...

  2. C#编程（六十三）----------并行LINQ

    并行LINQ .NET4在System.Linq命名空间中包含一个新类ParallelEnumerable,可以分解查询的工作使其分布在多个线程上.尽管Enumerable类给IEnumerable& ...

  3. java算法实现树型目录反向生成(在指定的盘符或位置生成相应的文件结构)

    http://www.cnblogs.com/interdrp/p/6702482.html 由于此次文件管理系统的升级确实给我们带来了很多方便且在性能上有很大提升,经过这段时间的使用 也发现了些问题 ...

  4. linux设置允许和禁止访问的IP host.allow 和 host.deny

    对于能过xinetd程序启动的网络服务,比如ftp telnet,我们就可以修改/etc/hosts.allow和/etc/hosts.deny的配制,来许可或者拒绝哪些IP.主机.用户可以访问. 比 ...

  5. Bias(偏差)，Error(误差)，和Variance(方差)的区别和联系

    准: bias描述的是根据样本拟合出的模型的输出预测结果的期望与样本真实结果的差距,简单讲,就是在样本上拟合的好不好.要想在bias上表现好,low bias,就得复杂化模型,增加模型的参数,但这样容 ...

  6. Andriod源码搜集

    1.一个左侧抽屉式导航NavigationDraw 教程:http://developer.android.com/training/implementing-navigation/nav-drawe ...

  7. go语言之进阶篇方法表达式

    1.方法表达式 示例: package main import "fmt" type Person struct { name string //名字 sex byte //性别, ...

  8. IIS6 Gzip 网页GZIP压缩(转)

    现在主流浏览器基本都支持 Gzip 压缩,因此这也成了 WebServer 优化策略的一种常规手段.启用压缩后能有效减少网页传输数据大小,使得有限带宽能提供更多的请求,并在一定程度上提高了网页 &qu ...

  9. windows取证

    工具网站 : http://www.ntsecurity.nu/toolbox/ 命令行历史 :命令行模式 CMD 中使 doskey /history 命令可以显示前面输入的命令情况(例如使用 cl ...

  10. [leetcode]Pascal's Triangle II @ Python

    原题地址:https://oj.leetcode.com/problems/pascals-triangle-ii/ 题意: Given an index k, return the kth row ...