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>

 

posted @ 2020-10-22 09:10  绿林豪士  阅读(1111)  评论(0编辑  收藏  举报