如果让你实现下图的样式(图片里面插入文字),你会怎么做呢?

  

  

  我总结了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属性直接引入图片,然后用定位实现

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

 

 

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