css实现banner背景图上文字效果+

<div class="pro-banner">
<img class="banimg" src="products-banner.jpg" alt="全部产品">
<div class="pro-help">
<h3>全部产品</h3>
<p class="zhaiyao">摘要摘要摘要</p>
<ul class="clearfix"><li> <img src="images/list_ic1.png" alt="免费安装"><p>免费安装</p></li>
<li> <img src="images/list_ic2.png" alt="现场指导"><p>现场指导</p></li>
<li> <img src="images/list_ic3.png" alt="24小时服务"><p>24小时服务</p></li>
<li class="none"> <img src="images/list_ic4.png" alt="终身售后"><p>终身售后</p></li></ul>
</div>
</div>

<style>
.pro-banner {position: relative;}
.banimg {
width: 100vw;
display: table-cell;
text-align: center;
}
.pro-help {position: absolute;left: 18%;top: 100px;}
.pro-help h3 {
color: #fff;
font-size: 30px;
font-weight: normal;
position: relative;
line-height: 1;
display: inline-block;
margin-bottom: 35px;
}
.pro-help h3:after {
position: absolute;
left: 0px;
bottom:-90%;
width: 85%;
height: 2px;
background: #fff;
content: '';
}
.pro-help .zhaiyao {width: 1200px;color: #fff;margin-top: 50px;line-height: 30px;letter-spacing: 1px;font-size: 16px;}

.pro-banner .pro-help ul li {
float: left;
text-align: center;
margin-right: 80px;
position: relative;
margin-top: 50px;
}
.pro-banner .pro-help ul li p {
color: #fff;
font-size: 16px;
margin-top: 23px;
}
.pro-banner .pro-help ul li:hover img {
animation: spinner 1000ms both;
}
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>