zoukankan      html  css  js  c++  java
  • css实现背景图静止+上层浮动效果

    .about {
    background: url(../images/bg1.jpg) no-repeat center top;
    margin-top: 40px;
    padding-top: 30px;
    background-attachment: fixed;
    height: 320px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    .about .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    }
    .about h3 {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    }
    .about p {
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    }
    .about h3 a {
    font-size: 36px;
    color: #ffffff;
    line-height: 36px;
    width: 150px;
    margin-bottom: 30px;
    display: inline;
    }
    .about ul {
    overflow: hidden;
    margin: 40px auto 40px auto;
    }
    .about li {
    float: left;
    width: 25%;
    }
    .about .about_l1 {
    background: url(../images/al1.png) no-repeat left 0;
    }
    .about .about_l2 {
    background: url(../images/al2.png) no-repeat left 0;
    }
    .about .about_l3 {
    background: url(../images/al3.png) no-repeat left 0;
    }
    .about .about_l4 {
    background: url(../images/al4.png) no-repeat left 0;
    }
    .about .about_l1, .about .about_l2, .about .about_l3, .about .about_l4 {
    background-size: 70px 70px;
    }
    .about span {
    color: #ffcc00;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    display: block;
    margin-right: 16px;
    margin-left: 84px;
    }
    .about li p {
    font-size: 15px;
    line-height: 24px;
    margin-top: 10px;
    margin-right: 16px;
    margin-left: 84px;
    text-align: left;
    color: #ffffff;
    }
    <div class="about">
    <div class="container">
    <div class="about_box">
    <h3><a href="/about.htm">标题</a></h3>
    <p>**有限公司是一家以生产重型矿山机器为主,集科研、生产、销售为一体的大型股份制企业。目前公司有磨粉基地、选矿建材基地、砂石设备基地三大生产基地。</p>
    </div>
    <ul>
    <li class="about_l1"><span>40多年生产经验</span><p>我们多年的生产经验,会给您带来好的产品和服务。</p></li>
    <li class="about_l2"><span>180多个国家市场</span><p>过硬的质量和服务赢得了180多个国家的客户的信赖。</p></li>
    <li class="about_l3"><span>26万平工业厂房</span><p>三大生产基地,现代化工业厂房,质量有保证。</p></li>
    <li class="about_l4"><span>360多人售后团队</span><p>专业技术服务团队全年无休为您提供技术支持和服务。</p></li>
    </ul>
    </div>
    </div>
  • 相关阅读:
    结对第二次作业——某次疫情统计可视化的实现
    结对作业(1)--疫情统计可视化(原型设计)
    软工实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    Prometheus监控docker容器(三)
    Prometheus数据持久化存储(二)
    HTTPS SSL证书在线生成
    从零搭建Prometheus监控报警系统(一)
    Ubuntu 16.04 误删内核后的系统恢复
    通过URL触发Jenkins构建
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/13856133.html
Copyright © 2011-2022 走看看