【html+css3】在一張jpg圖片上，顯示多張透明的png圖片

1、需求：在一個div布局里面放置整張jpg圖片，然后在jpg圖片上顯示三張水平展示的透明png圖片，且png外層用a標簽包含菜單

2、效果圖：

3、上圖，底層使用藍色jpg圖片，【首頁】、【購物車】、【會員中心】三個圖標都是透明的png黃色圖片

4、上代碼：html

<div style="height: 69px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background: url(http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_04.jpg);">
        <a href="{php echo $this->createMobileUrl('nightpay')}"><img src="http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_05.png" height="60px"></a>
        <a href="{php echo $this->createMobileUrl('MycartNight')}"><img src="http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_07.png" height="60px"></a>
        <a href="{php echo $this->createMobileUrl('User_center')}"><img src="http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_09.png" height="60px"></a>
    </div>

css：

a{
   color: #4f4f4f;
    text-decoration: none;
    display: block;
    flex: 1;
    width: 100%;
    height: 100%;
    text-align: center;  
}

 

5、記錄一點，多學習一點，以后總會用到，自信從點滴開始。