<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. Hbuild - 使用海马玩模拟器调试

    http://ask.dcloud.net.cn/question/13605     通过海马玩CMD(Droid4X_Settings_Tools_v1.1.5.bat) 设置模拟器的端口 269 ...

  2. iPads和iPhones的Media Queries

    iPad Media Queries 1.iPad Media Queries (所有版本,包括iPad mini) iPads从第一代到至今,总共有五代,也就是iPad1~iPad5,以及Mini ...

  3. 【转】Windows7系统下硬盘安装全新更高版本Windows7

    原文地址:http://jingyan.baidu.com/article/656db918aee053e381249c06.html 1.下载windows7 7600 ISO镜像(RC或RTM), ...

  4. Latex公式换行、对齐

    http://blog.sina.com.cn/s/blog_64827e4c0100vnqu.html 换行后等式对齐 \begin{equation}\begin{aligned}R(S_2)&a ...

  5. nginx下增加模块

    1.使用nginx -V确定nginx的编译参数2.下载nginx源码3.下载nginx的扩展模块(此处为memcache模块)4.进入nginx源码目录5../configure  --prefix ...

  6. he time that it takes to bring a block from disk into main memory

    DATABASE SYSTEM CONCEPTS, SIXTH EDITION There is a trade-off that the system designer must make betw ...

  7. delphi 创建DBASE和FOXPRO两类DBF数据文件的差异

    delphi 创建DBASE和FOXPRO两类DBF数据文件的差异,主要有几点: 1.创建方法不同 DBASE的创建方法: Self.Table1.Close; Self.Table1.Active ...

  8. 高级 Synth

    http://www.ibm.com/developerworks/cn/java/j-synth/

  9. 深入理解Javascript闭包 新手版

    一.什么是闭包?  “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述 ...

  10. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...