CSS3 background-attachment：属性
来源：互联网 发布：java公司贷款培训骗局 编辑：程序博客网 时间：2024/04/25 03:55
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px; box-sizing: border-box;}
pre{ padding: 10px; font-size: 18px; position: fixed;}
article{ width: 1000px; margin: auto;}
article div{ width: 100%; height: 600px; box-shadow: 0px 0px 8px 2px gray;}
article div img{ width: 100%;}
.bg_img1{ background: url(http://img.daimg.com/uploads/allimg/120225/3-120225130605612.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
.bg_img2{ background: url(http://img.daimg.com/uploads/allimg/140718/3-140GR33143.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
.bg_img3{ background: url(http://img.daimg.com/uploads/allimg/120405/3-120405120PL31.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
.bg_img4{ background: url(http://img.daimg.com/uploads/allimg/120224/3-12022421310L04.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
</style>
</head>
<body>
<pre>
background-attachment :定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否
适用于: 所有元素
</pre>
<article>
<div ><img src="http://img.daimg.com/uploads/allimg/120224/3-120224210UR44.jpg"/></div>
<div class="bg_img1"></div>
<div ><img src="http://img.daimg.com/uploads/allimg/140905/3-140Z51GT7.jpg"/></div>
<div class="bg_img2"></div>
<div ><img src="http://www.daimg.com/uploads/allimg/120224/3-120224124141C4.jpg"/></div>
<div class="bg_img3"></div>
<div ><img src="http://img.daimg.com/uploads/allimg/120224/3-120224144215557.jpg"/></div>
<div class="bg_img4"></div>
</article>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px; box-sizing: border-box;}
pre{ padding: 10px; font-size: 18px; position: fixed;}
article{ width: 1000px; margin: auto;}
article div{ width: 100%; height: 600px; box-shadow: 0px 0px 8px 2px gray;}
article div img{ width: 100%;}
.bg_img1{ background: url(http://img.daimg.com/uploads/allimg/120225/3-120225130605612.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
.bg_img2{ background: url(http://img.daimg.com/uploads/allimg/140718/3-140GR33143.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
.bg_img3{ background: url(http://img.daimg.com/uploads/allimg/120405/3-120405120PL31.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
.bg_img4{ background: url(http://img.daimg.com/uploads/allimg/120224/3-12022421310L04.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
</style>
</head>
<body>
<pre>
background-attachment :定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否
适用于: 所有元素
</pre>
<article>
<div ><img src="http://img.daimg.com/uploads/allimg/120224/3-120224210UR44.jpg"/></div>
<div class="bg_img1"></div>
<div ><img src="http://img.daimg.com/uploads/allimg/140905/3-140Z51GT7.jpg"/></div>
<div class="bg_img2"></div>
<div ><img src="http://www.daimg.com/uploads/allimg/120224/3-120224124141C4.jpg"/></div>
<div class="bg_img3"></div>
<div ><img src="http://img.daimg.com/uploads/allimg/120224/3-120224144215557.jpg"/></div>
<div class="bg_img4"></div>
</article>
</body>
</html>
1 0
- CSS3 background-attachment：属性
- CSS background-attachment 属性
- CSS background-attachment属性
- CSS中背景图片滚动属性background-attachment
- background-attachment
- background-attachment
- background-attachment
- background-attachment
- background-attachment
- background-attachment
- CSS3 background-size属性
- css3--background属性
- CSS3 background-clip 属性
- CSS3 background-size 属性
- CSS3 background 属性
- CSS3属性之background
- CSS3:background-size属性
- CSS3 background属性值
- ubuntu14.04下无法登录或循环登录的解决方法
- markov 模型概述
- Android Hook机制之Binder Hook
- CSS基本文字样式
- java
- CSS3 background-attachment：属性
- 后台线程修改自动布局引擎
- 如何让iframe背景色透明
- mysql字符串不支持emoj表情的处理方法
- Bitmap的加载和Cache
- matlab读取wav文件报错：Data compression format (Format #65534) is not supported.
- 设置网卡的mac地址
- android studio导入的 No such property: nexusUsername for class
- [hihoCoder太阁最新面经算法竞赛9] 题目一：Browser Caching （LRU缓存）
