zoukankan      html  css  js  c++  java

  • 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设置
  • 相关阅读:
    开源软件
    delphi 语法 点滴总结clientdataset
    combobox 下拉框 高度 调节 呵呵
    Delphi7中ClientDataSet的排序
    clientdataset 修改记录 成功
    http://bbs.csdn.net/topics/340046630 dbgrid怎么获取当前记录值
    Delphi中StrToDateTime函数TFormatSettings参数的使用
    IncSecond：将一个TDateTime变量加减一定数量的秒数
    clientdataset 做为 单机数据库的 使用 学习
    cmake命令用法整理list命令
  • 原文地址：https://www.cnblogs.com/dongxiaolei/p/9268410.html
Copyright © 2011-2022 走看看