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>
欢迎访问每天进步网:https://meitianjinbu.cn/