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>
  • 相关阅读:
    简单编码解码学习
    如何把SQLServer数据库从高版本降级到低版本?
    快速读取csv平面文件,并导入数据库,简单小工具
    数据流处理数据
    配置文件的几种读取方式
    常用webservice接口地址
    路径转换
    Tornado与JS交互工作
    测试技术发展之我见
    移动测试人员的未来:测试开发技术的融合
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/13856133.html
Copyright © 2011-2022 走看看