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>
View Code
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设置

 

posted @ 2018-07-05 15:08  dongxiaolei  阅读(2246)  评论(0)  编辑  收藏  举报