正式点叫 background-image recap ,最近 kissy editor 皮肤
做得有点晕,复习解读下 css3 规范 background 部分。
chrome 演示:
chrome and background-image
background-attachment
:
fixed : 背景相对于浏览器视窗固定。详细就是:位置不跟随容器内容的滚动变化,但是跟随浏览器本身的滚动条拖动而变化,使其在可视区域内位置固定,当然可能会因移到容器不可见区域而导致隐藏。
scroll : 背景相对于容器固定。详细:背景附在(attach)容器上面,位置不跟随容器内容的滚动变化,但是随着浏览器本身滚动条的拖动,和容器一样在可视区域内发生移动。
local : 背景相对于容器内容固定。详细:背景附在容器内容上面,位置随着容器内容的滚动而变化,也会随着浏览器本身滚动条的拖动,和容器一样在可视区域内发生移动。
local 属于 css3 新加特性(目前chrome支持),相当于原来直接在容器内部层上设置背景,而有了多背景支持
以及local,现在可以把这些都写在容器上了。
background-position :
定义背景图片的位置,既然要定位就要确定相对定位区域
(background-positioning-area)信息,这就和background-attachment以及的css3 新增的 background-origin设置密切相关。
当 attachment 设置 fixed 时 ,背景定位区域为视窗(initial contain block).
scroll 时,背景定位区域为容器(background-origin设置区域)。
local 是,背景定位区域为容器(background-origin设置区域)内容。
而 background-origin
有三种设置
border-box :包括边框的区域位置 (content+padding+border)
padding-box:不含边框的区域位置 (content+padding)
content-box:内容所占部分(content)
css2下默认为 padding-box
特别注意的是百分比的设置
:
当设置为百分比 x% 时,横坐标方向,背景图记做 a ,背景定位区域记做 b,则最终是把 a 的 左上角定位到相对于 b 左边界的
(width(b)-width
(a))*x%
处,通俗的说就是把背景图 a 的 x% 处 和 定位区域的 x% 处重合。
PS: ie6,7 bug
仔细比较 ie6,7 以及其他浏览器在这个页面
的表现可见,ie6,7 对于 scroll 和规范的 local 定义一样,背景附在了容器内容上面!
ie6 对于 fixed 处理也有问题,ie6 中的 fixed 不是相对于视窗定位,而是相对当前容器元素,和规范中的 scroll 一样!
IE9 支持 background-attachment
background-origin
应用场景:
图片轮播的 loading 提示
对于 ie6,7 应该将 loading 图片定义在单个图片容器上,而不是多个图片容器的容器上。
分享到:
相关推荐
PowerPoint模板内容页,使用了城市夜景PPT背景图片。首页放置白色卡片样式的矩形图案,填写工作总结汇报PPT标题文字。界面简洁大气实用。 PowerPoint模板内容页,由28张红黑配色的动态PPT图表制作。另外使用了职场...
1.10 要点回顾 17 第2章 处理网页文件 19 2.1 规划网站 19 2.2 创建新的网页 20 2.3 保存网页 21 2.4 指定默认页面或主页 24 2.5 编辑网页 24 2.6 组织文件 25 2.7 在浏览器中查看网页 26...
14.4.5 使用背景和图片 14.4.6 使用边距和边框 14.5 样式表类型 14.5.1 嵌入式样式表和〈style〉标签 14.5.2 内联样式和〈style〉属性 14.6 链接的样式表 14.6.1 〈link〉标签 ...
最小目标是构建一个网格,以监听“鼠标悬停”事件并更改背景颜色。 附加功能 我超越了最低限度,尝试通过样式和一些CSS动画来挑战自己。 例如,类似于旧的Etch-A-Sketch绘图板,当您清除绘图屏幕时,屏幕上的板会...
09 本周作业轮播图以及思路 第45章 轮播图片css部分 轮播图片js部分 第46章 01 数据库与dbms的概念 02 sql规范 03 数据库操作DDL 04 python s3 day46 mysql的数据类型 05 数据表操作 06 表记录之增删改操作 07 ...
7.1.1 背景画刷和前景画刷 151 7.1.2 字体 155 7.1.3 鼠标光标 159 7.2 内容控件 160 7.2.1 标签 160 7.2.2 按钮 161 7.2.3 工具提示 164 7.3 文本控件 170 7.3.1 多行文本 171 7.3.2 选择文本 172 7.3.3 ...
7.1.1 背景画刷和前景画刷 151 7.1.2 字体 155 7.1.3 鼠标光标 159 7.2 内容控件 160 7.2.1 标签 160 7.2.2 按钮 161 7.2.3 工具提示 164 7.3 文本控件 170 7.3.1 多行文本 171 7.3.2 选择文本 172 7.3.3 TextBox...
第一部分 背景 第1章 为什么创造WPF 1.1 回顾过去 1.2 步入WPF 1.3 作为.NET Framework的组成部分 1.3.1 为托管代码而设计 1.3.2 强调声明式描述 1.4 小结 第2章 XAML揭秘 ...
第一部分 背景 第1章 为什么创造WPF 1.1 回顾过去 1.2 步入WPF 1.3 作为.NET Framework的组成部分 1.3.1 为托管代码而设计 1.3.2 强调声明式描述 1.4 小结 第2章 XAML揭秘 ...
第一部分 背景 第1章 为什么创造WPF 1.1 回顾过去 1.2 步入WPF 1.3 作为.NET Framework的组成部分 1.3.1 为托管代码而设计 1.3.2 强调声明式描述 1.4 小结 第2章 XAML揭秘 ...
第一部分 背景 第1章 为什么创造WPF 1.1 回顾过去 1.2 步入WPF 1.3 作为.NET Framework的组成部分 1.3.1 为托管代码而设计 1.3.2 强调声明式描述 1.4 小结 第2章 XAML揭秘 ...
第一部分 背景 第1章 为什么创造WPF 1.1 回顾过去 1.2 步入WPF 1.3 作为.NET Framework的组成部分 1.3.1 为托管代码而设计 1.3.2 强调声明式描述 1.4 小结 第2章 XAML揭秘 ...
border基础回顾border 顾名思义就是边框的意思,在 CSS 中,你可以透过 border 的语法来对边框做许多样化的设计变化,例如设定边框的宽度、样式、颜色等等,也可以隐藏边框,原则上 CSS 对于 border 的设计不只局限...
让我们快速回顾一下每个组件。 首先,我们使用HTML构建了网站的结构和布局。 您可以查看 HTML 是什么以及它是如何工作的。 有关 HTML 的更高级教程,我推荐 其次,我们使用CSS为我们的网站添加了一些样式。 我们将...
6.1.1 背景画刷和前景画刷 130 6.1.2 字体 132 6.1.3 鼠标光标 136 6.2 内容控件 137 6.2.1 Content属性 138 6.2.2 对齐内容 140 6.2.3 WPF内容原则 141 6.2.4 标签 142 6.2.5 按钮 142 6.2.6 工具提示 145 6.3 特殊...
6.1.1 背景画刷和前景画刷 130 6.1.2 字体 132 6.1.3 鼠标光标 136 6.2 内容控件 137 6.2.1 Content属性 138 6.2.2 对齐内容 140 6.2.3 WPF内容原则 141 6.2.4 标签 142 6.2.5 按钮 142 6.2.6 工具提示 145 6.3 特殊...
4.4 创建图 ............................................67 4.5 指明引用或参考 ............................69 4.6 引述文本 ........................................70 4.7 指定时间 ..........................