【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:;
width: 100%;
height: 100%;
text-align: center;
}
5、记录一点,多学习一点,以后总会用到,自信从点滴开始。
【html+css3】在一张jpg图片上,显示多张透明的png图片的更多相关文章
- php 图片上传的公共方法(按图片宽高缩放或原图)
写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...
- 使用FormData数据做图片上传: new FormData() canvas实现图片压缩
使用FormData数据做图片上传: new FormData() canvas实现图片压缩 ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到,需要后台 ...
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- kindeditor修改图片上传路径-使用webapi上传图片到图片服务器
kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...
- 用Ajax图片上传、预览、修改图片
首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...
- SpringBoot + Vue前后端分离图片上传到本地并前端访问图片
同理应该可用于其他文件 图片上传 application.yml 配置相关常量 prop: upload-folder: E:/test/ # 配置SpringMVC文件上传限制,默认1M.注意MB要 ...
- CSS实现鼠标放图片上显示白色边框+文字描写叙述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 图片上传 一张展示,base64图片获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图,出现一个图片无法更换的问题
使用setImage 都无法更换 刷新图片 找了很久 什么方法都找过,最后发现...... 原来是 上传的图片的命名问题... 每次上传的图片 保存后都是同样的图片, 所以返回路径都是一样... jc ...
- 图片上传(3)(组件 -- 图片大小宽高限制)base64图片宽高读取
1.上传组件(可上传多个文件) <template> <div class="attachmentN"> <span class="btnS ...
随机推荐
- svn图标的含义
http://www.cnblogs.com/genhaosan/articles/5129791.html
- Hdu-1098解题报告
Hdu-1098解题报告 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1098 题意:已知存在一个等式f(x)=5*x^13+13*x^5+k*a*x ...
- 开源医学图像处理平台NiftyNet介绍
18年下半年10月份左右,老师分配有关NiftyNet平台的相关学习的任务,时隔5个月,决定整理一下以前的笔记,写成相应的博客! 目录 1.NiftyNet平台简介 2.NiftyNet平台架构设计 ...
- iOS12系统应用发送普通邮件构建邮件
iOS12系统应用发送普通邮件构建邮件 当确定设备支持邮件发送功能后,开发者就可以实现该功能.根据是否包含附件,邮件可以分为普通邮件和附件邮件两种.本节首先讲解如何发送普通邮件.实现过程如下: 1.构 ...
- 给有C或C++基础的Python入门 :Python Crash Course 1 - 3
暑假ACM集训结束,预习下个学期要学习的Python. 前几章比较基础,玩玩学学很快学完了,这里随意写点收获. 第一章 搭建编译环境 用的是最新的Python3.编译器用的是推荐的Geany..具 ...
- Wannafly Winter Camp 2019.Day 8 div1 E.Souls-like Game(线段树 矩阵快速幂)
题目链接 \(998244353\)写成\(99824435\)然后调这个线段树模板1.5h= = 以后要注意常量啊啊啊 \(Description\) 每个位置有一个\(3\times3\)的矩阵, ...
- 英语口语练习系列-C29-鸟类-辨别身份-断弦的琴
鸟类 sparrow sparrow 英 ['spærəʊ] 美 ['spæro] n. 麻雀:矮小的人 swallow swallow 英 ['swɒləʊ] 美 ['swɑlo] vt. 忍受:吞 ...
- Java并发编程(九)-- 进程饥饿和公平锁
上一章已经提到“如果一个进程被多次回滚,迟迟不能占用必需的系统资源,可能会导致进程饥饿”,本文我们详细的介绍一下“饥饿”和“公平”. Java中导致饥饿的原因 在Java中,下面三个常见的原因会导致线 ...
- golang单例模式
1.定义:单例对象的类必须保证只有一个实例存在,全局有唯一接口访问. 2.分类: 懒汉方式:指全局的单例实例在第一次被使用时构建. 饿汉方式:指全局的单例实例在类装载时构建. 3.实现: (1)懒汉方 ...
- 潭州课堂25班:Ph201805201 django 项目 第三十三课 后台文章标签查询提交到前台,删除功能实现(课堂笔记)
在视图中创建个类,要实现此功能,并把结果返回前台 , from django.shortcuts import render from django.views import View from dj ...