<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. [转].net 缩略图方法

    本文转自:http://www.cnblogs.com/promic/archive/2010/04/21/1717190.html private static string strConnect ...

  2. HP StorageWorks MSL2024 Tape Libraries - Robotic Error Sub-Codes

    Robotic error sub-codes Mechanical initialization failure 02 Connection to slave robotic failed 03 E ...

  3. 暑假训练round2 D: 好序列（Manacher）

    Problem 1061: 好序列 Time Limits:  1000 MS   Memory Limits:  65536 KB 64-bit interger IO format:  %lld  ...

  4. 2016.05.04,英语,《Vocabulary Builder》Unit 22

    acerb/acri: comes from the Latin adjective acer, meaning 'sharp' or 'sour'. acerbic: [ə'sɜːrbɪk] adj ...

  5. 那么都数据库表，那么多不同记录。是怎样都存储在一个key-value数据库的？

    那么都数据库表,那么多不同记录.是怎样都存储在一个key-value数据库的? :设置不同的键值而已!不同的表,选出统一的key规范 jedis.sadd("tom:friend:list& ...

  6. mysq数据库再次理解

    1.表中的一条记录就是一个object,object有很多属性,对应表中的字段.object的属性对应的值就是字段值 2.外键是关联表关系用的.表关系的确立只能通过外键 但更高效的策略是,在数据库中部 ...

  7. 【CEDEC 2015】【夏日课堂】制作事宜技术篇，新手职员挑战VR Demo开发的真相

    日文原文地址 http://www.4gamer.net/games/277/G027751/20150829002/ PS:CEDEC 2015的PPT有些要到10月才有下载,目前的都是记者照片修图 ...

  8. DNS：www.flickr.com

    203.84.197.9 203.84.197.25 203.84.197.26 203.84.197.27

  9. 做bbs论坛项目的收获（1）

    1. 当两张表出现关联的时候,关联的外键,千万不能是汉字,千万不能使汉字,因为这个问题,直接导致项目进行不下去..... 顺便记录一下知识点(一) 当用frameset设置网页的结构的时候 eg: & ...

  10. Unity 中 使用c#线程

    使用条件   天下没有免费的午餐,在我使用unity的那一刻,我就感觉到不自在,因为开源所以不知道底层实现,如果只是简单的做点简单游戏,那就无所谓的了,但真正用到实际地方的时候,就会发现一个挨着一个坑 ...