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>

转载于:https://www.cnblogs.com/samtrybest/p/5071210.html

background-attachment:fixed应用相关推荐

JavaScript技巧
JavaScript技巧 1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 < table bord ...
单元格中添加自适应斜线
1.页面效果 2.jsp代码 <canvas id="line" style="display: none;"></canvas>... ...
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...
搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 -
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: 1 <!Doctype htm ...
VSCode背景图片修改
运行VSC,并安装作者名为shalldie的background拓展通过拓展右下角的小齿轮进入拓展设置,取消勾选 Use Default(使用默认图片) 在拓展设置界面找到Custom Images ...
css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
CSS中的background的详细属性
本文转自:http://blog.sina.com.cn/s/blog_969555e3010135s6.html css2中有五个与背景相关的属性.它们是: background-color:完全填 ...
Tailwind Background
背景滚动(background attachment) CSS提供的background-attachment属性用于设置背景图像的固定方式,比如是否随着页面滚动.简单来说,background-at ...
css 前端设计师必知的background属性（有CSS3内容）
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-attachment,还为我们介绍了它 ...
前端设计师必知的background属性（有CSS3内容）
转自: http://www.cnblogs.com/biko-zc/archive/2009/09/09/1563545.html 背景属性--background是css中的核心属性.你应该对它有 ...

background-attachment:fixed应用

background-attachment:fixed应用相关推荐

最新文章

热门文章