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屬性直接引入圖片，然后用定位實現

　　　　第二種：用背景圖的方式且不使用定位實現（推薦第二種，有時定位用多了也不是一件好事，畢竟會脫離文檔流）