2种不同方式实现背景图里加入文字的简单CSS样式

 

　　如果让你实现下图的样式（图片里面插入文字），你会怎么做呢？

　　

　　

　　我总结了2种方式

　　　　①：用 img src属性直接引入图片 + 定位

　　　　②：用背景图且不使用定位

 

　　第一种：

　　　　HTML　

 　　<div class="download-explain">
              <img class="download-explain-img" src="../../assets/img/download-bg.png"/>
              <span class="download-explain-text">下载须知</span>
     </div>

　　　　CSS

    .download-explain-img {
        width: 100%;
    }

　　.download-explain {
       position: relative; 
　　　  margin: 0 auto;
　　　  margin-top: 26px;
　　　  margin-bottom: 22px;
　　　  width: 46%;
　　　  height: 74px;
　　　  line-height: 74px;
　　　  text-align: center;}

　　.download-explain-text {
　　　　position: absolute;
　　　　top: 50%;
　　　　left: 50%;
　　　　transform: translate(-50%,-50%);
　　　　color: #fff;
　　　　font-size: 18px;
　　　　font-weight: bold；
   }

 

　　第二种：

　　　　HTML

　　<div class="download-explain">
        <span class="download-explain-text">下载须知</span>
    </div>

　　　　CSS

.download-explain {
    margin: 0 auto;
    margin-top: 26px;
    margin-bottom: 22px;
    width: 46%;
    height: 74px;
    line-height: 74px;
    text-align: center;
    background: url(../../assets/img/download-bg.png) no-repeat;
    background-size: 100% 100%;
    }

.download-explain-text {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
   }

 

　　注：2种方式的主要区别在于

　　　　第一种：用 img src属性直接引入图片，然后用定位实现

　　　　第二种：用背景图的方式且不使用定位实现（推荐第二种，有时定位用多了也不是一件好事，毕竟会脱离文档流）

 

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点