background-attachment:fixed应用
设置为fixed属性，背景相对于屏幕窗口固定，然后如果有一张全屏的图片，再来一张全屏的图片，就可以看到与平时滚动屏幕不同的切换图片。代码
CSS部分：
html, body,.content{
height: 100%;
}
h2, body { margin: 0;}
.fixed-bg {
position: relative;
background-size: cover;
background-attachment: fixed;
height: 100%;
background-position: center center;
}
.bg-1 {
background-image: url("images/cd-background-1.jpg");
}
.container {
padding: 23% 1%;
background-color: #C7ABAB;
height: 100%;
}
.bg-2 {
background-image: url("images/cd-background-2.jpg");
}
HTML部分：
<div class="main content">
<div class="fixed-bg bg-1">
<h2>此处是图片</h2>
</div>
<div class="fixed-bg bg-2">
<h2>又一张图片</h2>
</div>
</div>
由此可以想到：如果图片之间加上内容 ，就会是比较新鲜的滚动方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body,.content{
height: 100%;
}
h2, body { margin: 0;}
.fixed-bg {
position: relative;
background-size: cover;
background-attachment: fixed;
height: 100%;
background-position: center center;
}
.bg-1 {
background-image: url("images/cd-background-1.jpg");
}
.container { padding: 23% 1%;
background-color: #C7ABAB;
height: 100%;}
.bg-2 {
background-image: url("images/cd-background-2.jpg");
} </style> </head>
<body>
<div class="main content">
<div class="fixed-bg bg-1">
<h2>此处是图片</h2>
</div>
<div class="scrolling-bg">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>
</div>
</div> <div class="fixed-bg bg-2">
<h2>又一张图片</h2>
</div>
<div class="scrolling-bg">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!</p>
</div>
</div>
</div>
</body>
</html>
background-attachment:fixed应用的更多相关文章
- [转]滚动视差？CSS 不在话下/background attachment
何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. ...
- 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...
- background属性的学习整理转述
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...
- css 背景 background
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...
- CSS3详解：background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- absolute vs fixed
<!DOCTYPE html> <html> <head> <title>absolute和fixed的区别</title> <sty ...
- 神奇的background
background:url() fixed .... 可以实现页面向下滚动时背景图片 保持位置不变 感觉好像背景在随鼠标滚动而滚动一样
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CSS--background
它的组合写法: background-color, background-image, background-repeat,backgroundattachment, background-posit ...
- CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）
Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...
随机推荐
- 08_一个java.lang.NullPointException报错
[报错代码] public class UserDaoTest{ private SqlSessionFactory sqlSessionFactory; //此方法在执行testFindUserBy ...
- 【技术·水】浅谈Dism++清理插件开发
前言 昨天我发布了NCleaner,一款Dism++清理插件(地址:http://bbs.pcbeta.com/viewthread-1692182-1-1.html) 有些人想要我开源NCleane ...
- Ajax 异步 XMLHttpRequest
1.GET方式 1.1设置参数 xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1 ...
- rgba兼容IE系列
在容器里面如果用到opacity或者filter:opacity里面的内容也会被滤镜化 如果不想里面的内容也被滤镜化我们可以用rgba来处理或者用透明的背景图片. 兼容ie的rgba的写法 backg ...
- 如何查看MySQL中每张表占用的空间大小
如题,找到MySQL中的information_schema表,这张表记录了所有数据库中表的信息,主要字段含义如下: TABLE_SCHEMA : 数据库名 TABLE_NAME:表名 ENGINE: ...
- 对 HTTP 304 的理解(转)
最近和同事一起看Web的Cache问题,又进一步理解了 HTTP 中的 304 又有了一些了解. 304 的标准解释是:Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供 ...
- Eclipse+Tomcat WEB开发配置
关键字:JDK,WEB,Eclipse,Tomcat OS: Windows 8.1 with update 1.下载安装JDK:http://www.oracle.com/technetwork/j ...
- Adding the Test API in The ASP.NET Web API Help Page
1.通过NuGet引用Web API Test Client 引用玩该DLL会生成如下文件: 这里面就是我们的帮助文档界面 2.在项目属性中进行如下设置,勾选XMl文档文件,并设置路径 3.在项目的A ...
- u-boot代码学习内容
前言 u-boot代码庞大,不可能全部细读,只能有选择的读部分代码.在读代码之前,根据韦东山教材,关于代码学习内容和深度做以下预先划定. 一.Makefile.mkconfig.config.mk等 ...
- DM8168 debug continue... ...
1.boot VFS: Unable to mount root fs via NFS, trying floppy. VFS: Cannot open root device "n ...