zoukankan      html  css  js  c++  java
  • 【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、记录一点,多学习一点,以后总会用到,自信从点滴开始。

  • 相关阅读:
    Cause: java.sql.SQLIntegrityConstraintViolationException: Duplicate entry '1288372549423476738' for key 'PRIMARY'
    环形数组循环
    less命令
    ln命令
    Vue中$refs的理解
    cut命令
    除数博弈
    find命令
    file命令
    最长公共前缀
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/9797825.html
Copyright © 2011-2022 走看看