【html+css3】在一張jpg圖片上,顯示多張透明的png圖片
阿新 • • 發佈:2018-10-16
*** 放置 技術分享 一個 col 標簽 ech 透明 image
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、記錄一點,多學習一點,以後總會用到,自信從點滴開始。
【html+css3】在一張jpg圖片上,顯示多張透明的png圖片