标签:.com template lock color use mob div布局 class 展示
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图片
标签:.com template lock color use mob div布局 class 展示
原文地址:https://www.cnblogs.com/xuzhengzong/p/9797825.html