<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. Java栈与堆一篇好文

    http://blog.csdn.net/zhangao0086/article/details/6347342

  2. linux消息队列的使用及内核实现原理

    mq_receive NAME mq_open - open a message queue SYNOPSIS #include <fcntl.h> /* For O_* constant ...

  3. [办公自动化]无法使用江南天安usbkey 无法使用视频网站

    同事打来电话说,无法使用江南天安开发的usbkey. 修复基本步骤记录如下: 1.卸载一切设备管理器中与之相关的驱动.拔出key. 2.重启计算机. 3.前往业务公开网站安装驱动. 4.插入key测试 ...

  4. DS实验题 Floyd最短路径 & Prim最小生成树

    题目: 提示: Floyd最短路径算法实现(未测试): // // main.cpp // Alg_Floyd_playgame // // Created by wasdns on 16/11/19 ...

  5. 动态加载js,css

    今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...

  6. XML xsd

    targetNamespace:表示本XSD中定义的元素和类型的名字空间都是http://exammpleOrder. xmlns:xsd:表示以前缀xsd开头的元素或则类型来自于http://www ...

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

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

  8. 异常处理与MiniDump详解(4) MiniDump

    http://blog.csdn.net/vagrxie/article/details/4398721 异常处理与MiniDump详解(4) MiniDump 分类:             [Wi ...

  9. Delphi XE5 与其他版本共存

    来源于http://www.board4allcz.eu 作者是gateway 如果你想使用Delphi诸如XE4.XE3.XE2.XE之类的版本跟Delphi XE5共存的话,在cglm.ini中简 ...

  10. ubuntu Nodejs和npm的安装

     cnpm install -g XXX errors :  npm i --registry=https://registry.npm.taobao.org     标签: nodejsnpm 20 ...