css固定背景图位置 实现屏幕滚动时 显示背景图不同区域
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container {
width: 100%;
padding: 50px 0;
padding-bottom: 30px;
height: auto;
}
.container.image-container {
width: 100%;
margin-top: 100px;
height: 150px;
background-image: url(https://cdn.vpsor.com/site/1.0.0/assets/images/banner/index-bg.jpg);
background-size: 100%;
background-attachment: fixed;
background-color: rgb(255, 255, 255);
opacity: 0.6;
padding: 10px 0px;
background-position: center center;
background-repeat: no-repeat;
transition: all 0.5s ease;
}
.container .title {
padding-top: 40px;
}
.container .title .content {
width: 600px;
height: 100%;
text-align: center;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="container-content safe clearfix">
<div class="content up-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/colony.png" alt="分布式架构">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>冗余架构</span></div>
<div class="desc"><span>分布式冗余架构设计</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云产品采用分布式集群架构，提高软硬件等基础设施冗余度，大大提高抗风险能力。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/config.png" alt="超强配置服务器">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>超强配置</span></div>
<div class="desc"><span>超高单点服务性能</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
采用业界高标准网络设备，服务器单机性能卓越；与运营商深入合作，带宽直连大陆。
</div>
</div>
</div>
</div>
<div class="content down-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/operations.png" alt="服务器运维">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>专业运维</span></div>
<div class="desc"><span>专业运维团队护航</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
硅云运维团队经验丰富，24小时执勤，主动式故障排查可让故障率更进一步地下降。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/safe.png" alt="服务器安全">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>安全设计</span></div>
<div class="desc"><span>顶尖网络安全专家</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云安全专家致力于构建更加完善的安全体系，保障业务安全，硅云平台业务更加有保障。
</div>
</div>
</div>
</div>
</div> </div>
<div class="container">
<div class="container-content safe clearfix">
<div class="content up-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/colony.png" alt="分布式架构">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>冗余架构</span></div>
<div class="desc"><span>分布式冗余架构设计</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云产品采用分布式集群架构，提高软硬件等基础设施冗余度，大大提高抗风险能力。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/config.png" alt="超强配置服务器">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>超强配置</span></div>
<div class="desc"><span>超高单点服务性能</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
采用业界高标准网络设备，服务器单机性能卓越；与运营商深入合作，带宽直连大陆。
</div>
</div>
</div>
</div>
<div class="content down-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/operations.png" alt="服务器运维">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>专业运维</span></div>
<div class="desc"><span>专业运维团队护航</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
硅云运维团队经验丰富，24小时执勤，主动式故障排查可让故障率更进一步地下降。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/safe.png" alt="服务器安全">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>安全设计</span></div>
<div class="desc"><span>顶尖网络安全专家</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云安全专家致力于构建更加完善的安全体系，保障业务安全，硅云平台业务更加有保障。
</div>
</div>
</div>
</div>
</div> </div> <div class="container">
<div class="container-content safe clearfix">
<div class="content up-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/colony.png" alt="分布式架构">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>冗余架构</span></div>
<div class="desc"><span>分布式冗余架构设计</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云产品采用分布式集群架构，提高软硬件等基础设施冗余度，大大提高抗风险能力。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/config.png" alt="超强配置服务器">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>超强配置</span></div>
<div class="desc"><span>超高单点服务性能</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
采用业界高标准网络设备，服务器单机性能卓越；与运营商深入合作，带宽直连大陆。
</div>
</div>
</div>
</div>
<div class="content down-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/operations.png" alt="服务器运维">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>专业运维</span></div>
<div class="desc"><span>专业运维团队护航</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
硅云运维团队经验丰富，24小时执勤，主动式故障排查可让故障率更进一步地下降。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/safe.png" alt="服务器安全">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>安全设计</span></div>
<div class="desc"><span>顶尖网络安全专家</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云安全专家致力于构建更加完善的安全体系，保障业务安全，硅云平台业务更加有保障。
</div>
</div>
</div>
</div>
</div> </div>
<div class="container image-container">
<div class="title">
<div class="content">
</div>
</div>
</div>
<div class="container">
<div class="container-content safe clearfix">
<div class="content up-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/colony.png" alt="分布式架构">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>冗余架构</span></div>
<div class="desc"><span>分布式冗余架构设计</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云产品采用分布式集群架构，提高软硬件等基础设施冗余度，大大提高抗风险能力。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/config.png" alt="超强配置服务器">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>超强配置</span></div>
<div class="desc"><span>超高单点服务性能</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
采用业界高标准网络设备，服务器单机性能卓越；与运营商深入合作，带宽直连大陆。
</div>
</div>
</div>
</div>
<div class="content down-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/operations.png" alt="服务器运维">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>专业运维</span></div>
<div class="desc"><span>专业运维团队护航</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
硅云运维团队经验丰富，24小时执勤，主动式故障排查可让故障率更进一步地下降。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/safe.png" alt="服务器安全">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>安全设计</span></div>
<div class="desc"><span>顶尖网络安全专家</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云安全专家致力于构建更加完善的安全体系，保障业务安全，硅云平台业务更加有保障。
</div>
</div>
</div>
</div>
</div> </div> <div class="container">
<div class="container-content safe clearfix">
<div class="content up-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/colony.png" alt="分布式架构">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>冗余架构</span></div>
<div class="desc"><span>分布式冗余架构设计</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云产品采用分布式集群架构，提高软硬件等基础设施冗余度，大大提高抗风险能力。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/config.png" alt="超强配置服务器">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>超强配置</span></div>
<div class="desc"><span>超高单点服务性能</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
采用业界高标准网络设备，服务器单机性能卓越；与运营商深入合作，带宽直连大陆。
</div>
</div>
</div>
</div>
<div class="content down-content">
<div class="content-item left-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/operations.png" alt="服务器运维">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>专业运维</span></div>
<div class="desc"><span>专业运维团队护航</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
硅云运维团队经验丰富，24小时执勤，主动式故障排查可让故障率更进一步地下降。
</div>
</div>
</div>
<div class="content-item right-content-item">
<div class="image-wrap wrap">
<img width="80" height="80" src="//cdn.vpsor.com/site/1.0.0/assets/images/safe/safe.png" alt="服务器安全">
</div>
<div class="title-wrap wrap">
<div class="little-wrap">
<div class="big-title"><span>安全设计</span></div>
<div class="desc"><span>顶尖网络安全专家</span></div>
</div>
</div>
<div class="desc-wrap wrap">
<div class="little-wrap">
云安全专家致力于构建更加完善的安全体系，保障业务安全，硅云平台业务更加有保障。
</div>
</div>
</div>
</div>
</div> </div> </body>
</html>
height: 150px;
background-image: url(https://cdn.vpsor.com/site/1.0.0/assets/images/banner/index-bg.jpg);
background-size: 100%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
主要css设置
css固定背景图位置 实现屏幕滚动时 显示背景图不同区域的更多相关文章
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- css固定div头部不随滚动条滚动
给div加浮动: position:fixed; 固定宽度,高度,距离头部,左部为0:width: 99%; height: 80px; top:0; left: 0;
- css取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...
- css - 当文本内容长度超出屏幕宽度时，以省略号代替
<style> .ellipsis{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </styl ...
- 用css实现文本不换行切超出限制时显示省略号（小tips）
div{ max-width: 500px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;/*文本不换行*/ } 如上 ...
- WPF中Button的背景图片，实现禁止IsMouseOver时显示默认
<Button x:Name="btnPickUpNum" Click="PickUpNum_OnClick" Grid.Row="1" ...
- div样式position：fixed,不随屏幕滚动而滚动，导致屏幕太小时弹出层被遮挡，无法滚动查看的解决办法
window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...
- css固定元素位置(fixed)
来源:http://www.cnblogs.com/lecaf/archive/2011/03/25/fixed.html fixed是一种特殊的absolute,同样不占文档流,特殊的地方在于fix ...
- css - 背景图片充满整个屏幕
body { /* 加载背景图 */ background: url("../static/images/index/backImg.jpg") no-repeat; /* 背景图 ...
随机推荐
- SQL优化原则(转)
一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用系统提交实际应用后,随着数据库中数据的增加,系统 ...
- input type=file实现图片上传，预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- [SCOI2010] 连续攻击游戏
题目 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一 ...
- java中Map集合的理解
Map |--Hashtable:底层是哈希表数据结构,不可以存入null键null值.该集合是线程同步的.jdk1.0.效率低. |--HashMap:底层是哈希表数据结构,允许使用 null 值和 ...
- IDEA内置Git管理
总结: 1.要想用git管理项目,先要将本地项目与git关联,才能进行commit.push.pull等操作: 2.将本地项目于git关联后,本地仓库的地址默认就是项目地址: ...
- OAuth2.0的refresh token
最近看人人网的OAuth认证,发现他是OAuth2.0,之前一直看的是新浪的OAuth,是OAuth1.0. 二者还是有很多不同的,主要的不同点在access token的获取方式. OAuth1.0 ...
- HTML--Canvas基础入门
一 HTML5画布基本介绍 1.HTML5专门为画布功能提供的标签:<canvas>,所以画布相关的功能都是基于这个标签来完成的; <canvas id="canvas&q ...
- spring boot 随手记
1.当加入security 起步依赖后,如果不做任何手动配置的话,默认会跳转到一个登录页面,不管你喜不喜欢,所有的请求都必须登录,用户名和密码是保存在内存中的, 默认用户名是user 密码在控制台里 ...
- PATH、CLASSPATH、CLASSPATH
PATH: 说明: 环境变量中的path,意在在向计算机发出指令时的一个指向路径,如 一般会在path里加上:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 其中:%JAVA_ ...
- canvas实现验证码
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SV ...