<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. 使用SimpleXML应该注意的问题有哪些？

    SimpleXML提供了一套简单快速的XML操作方法,大大地提高了XML操作的效率. 但是有时不小心也会带来不小的麻烦,看下面一段代码: $xml=simplexml_load_string('< ...

  2. myeclipse10 将一个java工程合并到web工程

    参考:zhaoshijie http://zhaoshijie.iteye.com/blog/ baidu: http://zhidao.baidu.com/link?url=WXr-EgI0OyUs ...

  3. Windows系统中Git的安装配置

    一.Git安装 1.下载 Git官网:https://git-scm.com/download/ 选择windows版本下载即可. 百度软件中心:http://rj.baidu.com/ 如官网下载不 ...

  4. 2016.04.28,英语,《Vocabulary Builder》Unit 20

    nom, comes from the Latin word for 'name'. nominee is 'named', [ˌnɑːmɪ'niː] n. 被提名的人, 名义人. binomial ...

  5. php程序效率优化的一些策略小结

    php程序效率优化的一些策略小结   1.在可以用file_get_contents替代file.fopen.feof.fgets等系列方法的情况下,尽量用 file_get_contents,因为他 ...

  6. bootstrap static popover

    jq $('.popover').show().css('position','relative');

  7. 图片lightbox2

    1. 官网下载 http://lokeshdhakar.com/projects/lightbox2/ 2.引入 css  jquery  js 3. HTML格式 <a href=" ...

  8. 【转】CodeIgniter配置之database

    CodeIgniter的数据库配置文件位于application/config/database.php, 该文件中定义了$db的二维数组,参考文件如下: 1 2 3 4 5 6 7 8 9 10 1 ...

  9. JBoss的安装与配置(对应eclipse配置)【转】

    安装JBoss纯粹是目的就是学习EJB3...至少现在是这样的 EJB需要运行在EJB容器中.每个J2EE应用服务器都含有EJB容器和Web容器.这样,既支持运行EJB,也可以运行Web应用 目前EJ ...

  10. Bluetooth GATT介绍

    目录 1. 介绍 2 内容 2.1 Configured Broadcast 2.2 GATT Profile Hierarchy 3 Service Interoperability Require ...