<html>

<head>

<style type="text/css">

body

{

  background-image:url('http://images2015.cnblogs.com/blog/441096/201610/441096-20161013163910781-1393436376.jpg');

  background-repeat:no-repeat;

  background-attachment:fixed;

  background-position:center;

}

</style>

</head>

<body>

<body>

<div style="width:100px;height:100px;background:red;position:absolute;top:100px;left:100px">

</div>

<div style="width:100px;height:100px;background:blue;position:absolute;top:300px;left:300px">

</div>

<div style="width:100px;height:100px;background:white;position:absolute;top:600px;left:600px">

</div>

<div style="width:100px;height:100px;background:gray;position:absolute;top:900px;left:900px">

</div>

<div style="width:100px;height:100px;background:black;position:absolute;top:1200px;left:1200px">

</div>

</body>

</body>

</html>

视差效果原理 background-attachment:fixed的更多相关文章

  1. [转]滚动视差？CSS 不在话下/background attachment

      何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. ...

  2. 滚动视差效果——background-attachment

    滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景.内容.贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体的近似效果.最近在做一个项目wiki的时 ...

  3. 基于Parallax设计HTML视差效果

    年关将至,给大家拜年. 最近时间充裕了一点,给大家介绍一个比较有意思的控件:Parallax.它可以用来实现鼠标移动时,页面上的元素也做偏移的视差效果.在一些有表现层次,布局空旷的页面上,用来做Hea ...

  4. css中的视距perspective和视差效果

    概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...

  5. banner 跟随鼠标呈现视差效果

    参考 Element 官网,利用 js / jq 和 css3, 实现某图片随着鼠标移动呈现的视差效果. <!DOCTYPE html> <html> <head> ...

  6. 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...

  7. 用CSS3 & jQuery创建apple TV海报视差效果

    用CSS和jQuery来实现它,尽量看起来和原效果一样. 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有 ...

  8. 使用UITableView实现图片视差效果

    使用UITableView实现图片视差效果 视差效果如下: 原理: 根据偏移量计算不同的移动速度,so easy! // // RootTableViewController.h // TableVi ...

  9. Android 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了: 先扔一个最终实现的效果图 先分析下效果图中实现的功 ...

随机推荐

  1. the thread has exited with code -1073741819

    内存分配异常.无效或冲突.指针存在但指向无效内存区域.

  2. Ubuntu 14.04 使用的一些笔记

    1. 今天下载了安卓的2.3.5的源代码,解压tar的时候,发现一个错误中断了解压过程: could not create the hard link file, 看了一下基本上都是每个主目录下的 . ...

  3. 安装Bind过程中提示丢失MSVCR110.dll的解决办法

    前几天在线安装Visual Studio 2012 Update 3,由于在线安装需要不断下载安装文件,时间很长,后来等不下去,就取消了,不幸的是VS启动不了了,弹出“devenv.exe – 系统错 ...

  4. 分布式架构高可用架构篇_02_activemq高可用集群(zookeeper+leveldb)安装、配置、高可用测试

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  5. MySQL助理配置

    基本配置 你需要经常察看以下3个配置项.不然,可能很快就会出问题. innodb_buffer_pool_size:这是你安装完InnoDB后第一个应该设置的选项.缓冲池是数据和索引缓存的地方:这个值 ...

  6. BZOJ 2120 数颜色（带修改的莫队）

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MB Submit: 3478  Solved: 1342 [Submit][Status][Discus ...

  7. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  8. myBatis应用

    最近项目中使用myBatis(iBatis),所以目前对所遇的一些问题及有些模糊的地方在这里标注一下. 首先mybaits是一个“半自动化”的ORM框架. 需要使用的jar包:mybatis-3.0. ...

  9. DS实验题 Old_Driver UnionFindSet结构 指针实现邻接表存储

    题目见前文:DS实验题 Old_Driver UnionFindSet结构 这里使用邻接表存储敌人之间的关系,邻接表用指针实现: // // main.cpp // Old_Driver3 // // ...

  10. BundleConfig 的使用 通配符

    //是不是说一定要是前缀文件呢 OK 通过 通配符只能使用在前缀或后缀 //捆绑名称 bundles.Add(new StyleBundle("~/caijinhao/caijinhao&q ...