background-attachment：fixed实现酷炫效果

最近发现一个css的背景图片的属性，可以实现一个很酷璇的效果，根据效果，我给它命名为王者换肤，下面我们来看一下它的实现方式。

css3参考手册 的背景与边框目录里面，有一个介绍background-attachment属性的，它的值有3个，分别是fixed,scroll,local,他们分别代表的意义如下：

首先测试一下scroll属性的效果,页面结构如下：

                <div class="wrap item1"><p>Information1</p></div>

样式如下：

.wrap {width: 100%;height: 800px;overflow: scroll;background-repeat: no-repeat;background-position: left center;background-size: 100% auto;background-color: black;background-image: url(images/th1.jpg);<!-- scroll -->background-attachment: scroll;}
p {width: 100%;height: 1000px;background: rgba(255,255,255,0.5);font-size: 30px;text-align: center;line-height: 100px;font-weight: 700;color:#2d2a2a;position: relative;}
.item1 p{margin-top: 50px;}

效果如下：

元素发生滚动，背景图片没有跟随滚动，那我们再看一下local属性的效果，DOM结构不用变，只修改属性值如下：

.wrap {width: 100%;height: 800px;overflow: scroll;background-repeat: no-repeat;background-position: left center;background-size: 100% auto;background-color: black;background-image: url(images/th1.jpg);<!--local  -->background-attachment: local;}

效果如下：

元素滚动，背景图片跟随滚动，我们再看一下fixed属性的效果，DOM结构不用变，只修改属性值如下：

.wrap {width: 100%;height: 800px;overflow: scroll;background-repeat: no-repeat;background-position: left center;background-size: 100% auto;background-color: black;background-image: url(images/th1.jpg);<!--fixed  -->background-attachment: fixed;}

效果如下：

背景图片不随元素滚动，当元素即将滚动出视口，其他DOM结构出现，背景图片也未发生移动，看起来像是被其他元素遮挡了一样，其实是元素随着页面的滚动，部分内容已经不在视口的范围，所以不再显示，并不是被其他元素遮挡了。这个就是fixed的效果。一个元素是这样的效果，如果页面里面多放几个元素，属性都设置为fixed，会是什么效果呢？页面布局如下：

  <div class="wrap item1"><p>Information1</p></div><div class="wrap item2"><p>Information2</p></div><div class="wrap item3"><p>Information3</p></div><div class="wrap item4"><p>Information4</p></div><div class="wrap item5"><p>Information5</p></div>

样式如下：

 .wrap{width: 100%;height: 800px;background-repeat: no-repeat;background-position: left center;background-size: 100% auto;background-color: black;overflow: scroll;/*fixed*/background-attachment: fixed;}p{width: 100%;height:100px;background: rgba(255,255,255,0.5);font-size: 30px;text-align: center;line-height: 100px;font-weight: 700;color:#2d2a2a;position: relative;}
.item1 p{margin-top: 50px;}
.item1{background-image: url(images/th1.jpg);}
.item2{background-image: url(images/th2.jpg);}
.item3{background-image: url(images/th3.jpg);}
.item4{background-image: url(images/th4.jpg);}
.item5{background-image: url(images/th5.jpg);}

效果如下：

页面看起来就像在动态切换背景一样，我称之为王者换肤。

background-attachment：fixed实现酷炫效果相关推荐

前端酷炫效果参考_纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果
前面文章有制作水晶魔方,这次我们升级一下它的功能,通过鼠标控制魔方旋转. 大家先看效果这酷炫的效果,你怎么看? 这次效果,咱们需要用JS实现.主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rota ...
c语言触屏滑动图片,微信小程序左右滑动切换图片酷炫效果（附效果）(示例代码)...
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 2 ...
python 酷炫效果_六种酷炫Python运行进度条效果的实现代码
六种酷炫Python运行进度条效果的实现代码,进度条,代码,六种,效果,酷炫六种酷炫Python运行进度条效果的实现代码易采站长站,站长之家为您整理了六种酷炫Python运行进度条效果的实现代码的 ...
前端酷炫效果参考_2020年大前端发展趋势
迅速发展的前端开发,在每⼀年,都为开发者带来了新的关键词.2019 年已步⼊尾声,2020 年前端发展的关键词⼜将有哪些呢?发展的方向又会是什么呢?参考2019年大前端的发展,不出意外,前端依旧会围绕 ...
you-get下载b站选集_Flash选集：酷炫效果和实用的ActionScript-第1章：Flash基本知识
you-get下载b站选集 Life without Flash would be uninteresting and mundane. Flash sites are to static HTML ...
Duang，Duang,H5 +酷炫效果+干货，此时不收更待何时
现在市面上有一大批H5页面模板制作工具,诚然,他们方便了很多非专业设计师设计制作H5页面.但是,很多模板工具上的作品大部分还停留在左飞入右飞出的初级境界,看多了真心有些腻,动效如无美感还不如看静态的. ...
前端酷炫效果之那些漂亮的登录界面
源代码:前端登录页面 PS:如果点击链接是 404 页面,可能是还未登录 gitee.登录之后,可以直接搜索,木兰君,找到仓库中的前端页面效果合集 -> 前端登录页面. 以上作品均来自B站(在此 ...
Android 自定义倒计时圆环动画酷炫效果
在app中倒计时功能也是常有的功能,由于工作需要今天就来自定义圆环倒计时动画效果原理就是利用canvas 绘制圆环内圆和文字效果图如下: 自定义倒计时动画类 package cn.xm. ...

background-attachment：fixed实现酷炫效果

background-attachment：fixed实现酷炫效果相关推荐

最新文章

热门文章