文档章节

background-attachment属性

LGolden
 LGolden
发布于 2017/07/25 09:19
字数 479
阅读 3
收藏 0

今天遇到一个效果,就是有两张图片,一张在前,一张在后。当滑动滚动轴向下拉动时,第一张图片是保持不动的,而第二张图片直接覆盖第一张图片。我们首先看下图:

灰色代表浏览器窗口,然后分别有3个div,第二个div中放入背景图,黑色圆球就代表背景图。

此时,如果给第2个div加入background-attachment:fixed属性,则会变成如图所示:

背景图跑到了浏览器窗口的最顶部。此时,背景图脱离了第二个div,可以说和第二个div几乎没有任何联系了,而是以视角进行定位。

啥叫以视角进行定位了,我们啥时候对背景图定位了?我们在设置了背景图的时候,是不是设置了background-position属性,这个就是对背景图进行定位了。什么?没写这个属性?没关系,即使没写,这个属性也有个默认值,即left top,视角的左上角。

注意,当黑色圆球背景图设置了background-attachment:fixed属性后,实际上是被第一个div覆盖的。为了方便演示,设置了第一个蓝色div的透明度。

当滚动轴向下拉时,只有第二个div经过的区域,黑色圆球可以正常显示(黑色圆球背景图隶属于第2个div,和第2个div中的内容属于同一级,因此均能显示。而其他div经过背景图时,会覆盖住),如图:

注意,黑色圆球背景图此时是全黑,不是因为第2个div设置了透明度才显示的

继续向下拉,第3个div也会覆盖,如图

这样,在视觉上就仿佛前一张图片未动,而后一张图片直接覆盖在其之上了。

© 著作权归作者所有

LGolden
粉丝 1
博文 28
码字总数 18762
作品 0
南京
程序员
私信 提问
前端设计师必知的background属性(有CSS3内容)

回顾 css2中有五个与背景相关的属性。它们是: background-color: 完全填充背景的颜色 background-image: 用作背景的图片 background-position: 确定背景图片的位置 background-repeat: 确定...

黑魔法
2016/07/19
36
0
css 背景样式 background

background-color: 指定填充背景的颜色。 background-image: 引用图片作为背景。 background-position: 指定元素背景图片的位置。 background-repeat: 决定是否重复背景图片。 background-a...

Jack088
2015/03/24
0
0
CSS3详解:background

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。 1、多个背景图片 在css3里面,你可以再一个标签元素里应用多个...

DanielYue
2016/07/14
0
0
CSS定位元素--背景

CSS 里也一样,每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容(如文本或图片)和边框,元素的背景层可以用实色填充(使用background-color 属性),也可以包含任意多个背景...

风吹一米阳光
2015/09/22
56
0
CSS background 属性

CSS background 属性 定义和用法 background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性: background-color background-position background-size background-repeat bac...

ke_ry
2016/09/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部