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

其他 2018-07-05 15:20:20 阅读次数: 0 
<!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设置

猜你喜欢

转载自www.cnblogs.com/dongxiaolei/p/9268410.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022