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:;
width: 100%;
height: 100%;
text-align: center;
}

5、记录一点,多学习一点,以后总会用到,自信从点滴开始。

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

  1. php 图片上传的公共方法(按图片宽高缩放或原图)

    写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...

  2. 使用FormData数据做图片上传: new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  3. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  4. kindeditor修改图片上传路径-使用webapi上传图片到图片服务器

    kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...

  5. 用Ajax图片上传、预览、修改图片

    首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...

  6. SpringBoot + Vue前后端分离图片上传到本地并前端访问图片

    同理应该可用于其他文件 图片上传 application.yml 配置相关常量 prop: upload-folder: E:/test/ # 配置SpringMVC文件上传限制,默认1M.注意MB要 ...

  7. CSS实现鼠标放图片上显示白色边框+文字描写叙述

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 图片上传 一张展示,base64图片获取

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图,出现一个图片无法更换的问题

    使用setImage 都无法更换 刷新图片 找了很久 什么方法都找过,最后发现...... 原来是 上传的图片的命名问题... 每次上传的图片 保存后都是同样的图片, 所以返回路径都是一样... jc ...

  10. 图片上传(3)(组件 -- 图片大小宽高限制)base64图片宽高读取

    1.上传组件(可上传多个文件) <template> <div class="attachmentN"> <span class="btnS ...

随机推荐

  1. 解决UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position

    最近用Python写了些爬虫,在爬取一个gb2312的页面时,抛出异常: UnicodeEncodeError: 'ascii' codec can't encode characters in po ...

  2. Django之Models(三)

    Django之Models(三) 创建多对多关系 第一种方式:创建多对多的关系authors=models.ManyToManyField("Author") class Publ ...

  3. linux 学习笔记四

    文件权限管理篇章 chown  -R mysql.  /usr/local 把 /usr/local/以及以下的所有文件和子目录属主改为  mysql ls -al * 用这条命令查询 chgrp c ...

  4. 765. 有效的三角形.md

    描述 给出三个整数 a, b, c, 如果它们可以构成三角形,返回 true. 三角形的定义 (Wikipedia) 样例 给定 a = 2, b = 3, c = 4 返回 true 给定 a = ...

  5. Dropping tests [POJ2976] [01分数规划]

    Description 今年有 n 场 ACM-ICPC 竞赛,小明每场都有资格参加.第 i 场竞赛共有 b[i] 道题.小明预测第 i场他能做出 a[i] 道题.为了让自己看着更“大佬”一些,小明想 ...

  6. 2017.07.06【NOIP提高组】模拟赛B组

    Summary 今天比赛感觉题目很奇葩,都可以用许多简单方法来做,正确性都显然,当然也有点水,也就是说是考我们的数感和数学知识,而程序,只是代码的体现. 这次的时间安排感觉不错,因为很快就打完最后一道 ...

  7. C# Web API Modify Post Data Size Limit

    在Web.config中增加下面两个配置后,重启IIS即可. 1.修改http请求数据大小限制 <system.web>  <httpRuntime maxRequestLength ...

  8. 使用log

    1:下载和安装log4j log4j的官方站点是http://logging.apache.org/log4j/登录此网站即可下载. http://logging.apache.org/log4j/2 ...

  9. 创建xml文件、解析xml文件

        1.创建XML文件: import codecs import xml.dom.minidom doc=xml.dom.minidom.Document() print doc root=do ...

  10. Java几种常见的编码方式

    几种常见的编码格式 为什么要编码 不知道大家有没有想过一个问题,那就是为什么要编码?我们能不能不编码?要回答这个问题必须要回到计算机是如何表示我们人类能够理解的符号的,这些符号也就是我们人类使用的语言 ...