码迷，mamicode.com
首页 > Web开发 > 详细

css固定背景图位置 实现屏幕滚动时 显示背景图不同区域

时间：2018-07-05 16:03:39      阅读：264      评论：0      收藏：0      [点我收藏+]

标签：html   item   ati   contain   little   col   经验   ima   htm   

技术分享图片 
<!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设置

 

css固定背景图位置 实现屏幕滚动时 显示背景图不同区域

标签：html   item   ati   contain   little   col   经验   ima   htm   

原文地址：https://www.cnblogs.com/dongxiaolei/p/9268410.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！