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; /* 背景图 ...
随机推荐
- C语言第九讲,结构体
C语言第九讲,结构体 一丶结构体的定义 在C语言中,可以使用结构体(Struct)来存放一组不同类型的数据.结构体的定义形式为: struct 结构体名{ 结构体所包含的变量或数组 }; 结构体是一种 ...
- Spark新手入门——2.Hadoop集群(伪分布模式)安装
主要包括以下三部分,本文为第二部分: 一. Scala环境准备 查看 二. Hadoop集群(伪分布模式)安装 三. Spark集群(standalone模式)安装 查看 Hadoop集群(伪分布模式 ...
- 数字证书及CA介绍
数字证书及CA介绍 作者: 编程随想 发布时间: 2013-12-03 11:48 阅读: 95280 次 推荐: 69 原文链接 [收藏] ★ 先说一个通俗的例子 考虑到证书体系的 ...
- java中的重载（overload）和重写(override)区别
方法重载(overload): 方法重载就是在一个类中可以创建多个方法,它们具有相同的名字,但是具有不同的参数和不同定义,调用方法时通过传递给他们的不同参数个数和参数列表决定具体使用 哪 ...
- XML部分
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式? 两种形式:DTD以及schema: 本质区别:schema本身是xml的,可以被XML解析器解析(这也是从DTD上发展sc ...
- 玩转物联网之MQTT
物联网概述 物联网——即Internet-of-Things,其实这个概念由来已久,简单来讲,物联网是物与物.人与物之间的信息传递与控制简称.它和能源.电子信息.医疗.交通.零售.物流.工业制造等行业 ...
- ECMAScript 引用类型
Object对象 新建对象 var obj = new Object() var obj ={} var obj={age:23} ... hasOwnProperty(property) 方法 va ...
- VB.Net DataSet 填充資料庫內容
'導入命名空間Imports System.Data.OleDb '定義變量 Dim ds As DataSet = New DataSet() Dim i, cn As Integer Dim Sq ...
- Apache:详解QSA,PT,L,E参数的作用
[QSA] 当被替换的URI包含有query string的时候,apache的默认行为是,丢弃原有的query string 并直接使用新产生的query string,如果加上了[QSA]选项,那 ...
- Python 操作文件
open() 函数 模式 说明 r 只读模式 w 只写模式,文件不存在自动创建:存在则清空再写 a 只追加写,在文件最后追加写 r+ 打开一个文件用于读写.文件指针将会放在文件的开头. w+ 打开一个 ...