码迷,mamicode.com
首页 > Web开发 > 详细

【html+css3】在一张jpg图片上,显示多张透明的png图片

时间:2018-10-16 16:05:01      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:.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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!