html 图片上放置按钮,用CSS在图片上再加一个小按钮

很简单的,嗯,就是要做成这样的:

1fb94520d88e9641eb7e794b01109596.png

用CSS,当然得用层了,就是在图片上再加一个层,用来放那个按钮,按钮又有两种方式可以放,一种是直接用图片img标签,一种是通过背景图片放上去。这里我们就用背景图片这个方式来做吧!

首先准备这样两张图片:

7caeb2a1a7e48083c5de7014ce6ffa00.gif宽19px,高32px

720b9153c7b9711c05ca0366648f0eed.png宽120px,高90px

我们想想:底部要放图片,上面要放一个按钮,貌似需要用到绝对定位,那我们需要为图片再定义一个div样式,用来放图片和这个按钮,我们可以这样写:

.expdiv{

padding:4px;

width:120px;

border:1px solid #c8c8c8;

}

剩下的就是关键的把按钮放上去,在这里,按钮是一个链接,我们可以设置链接的显示方式为block,并设置其z-index值为2(只要比0大都可以),设置其宽高分别为19px和16px(我们只需要显示按钮图片的一半就可以了),那代码可以这么写:

.expbtn{

position:absolute;

z-index:2;

margin:72px 0px 0px 99px;

}

.expbtn a{

display:block;

width:19px;

height:16px;

background:#fff;

background:url(../images/btn_playbg.gif);

}

.expbtn a:hover{

background:url(../images/btn_playbg.gif) left -16px;

}

那么,在网页中的代码就该这么写了:

small.jpg

OK,就这样,试试吧,嗯!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541256.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么将oracle的sql文件转换成mysql的sql文件

怎么将sql文件导入PowerDesigner中的方法(将oracle的sql文件转换成mysql的sql文件)呢? 怎么将xx.sql文件的数据库结构导入powerdesigner 的方法呢? 现讲下。 工具/原料 PowerDesigner软件,oracle数据库 方法/步骤 将要导入的库的所有表的表结构(不要表数…

ios html图片相对路径,iOS 下加载本地HTML/js/css/image 等路径问题

今天在项目中遇到一个问题:我将H5的文件拖入项目中,在webView上添加H5,运行时发现H5的样式与图片等都没屏幕快照 2016-07-06 11.33.22.png有了。经过多种测试后发现:是路径的问题。在ios项目下添加本地HTML/js/css/image 当拖入项目时有两种选…

el-calendar 怎么设置上一年和下一年_为什么香港硕士一年的含金量那么高?

为什么香港硕士研究生只读一年但含金量更高?近些年来香港留学大热,其中一个原因就是香港的授课式硕士研究生仅需一年就可以拿到学位。对于学生来说,在享受到国际一流的教学资源和工作机会的同时,既节省时间又节约金钱,…

武汉市江岸区2021年高考成绩查询,2021年武汉各区一、二、三批次高中有哪些(名单)...

5月5日至9日是武汉市中考网上报名填报志愿的日子,填报志愿之前应提前了解本区的一批次、二批次和三批次学校的名单,了解其历年录取分数线,并选中最合适最理想的一所学校进行填写,下面我们来看详细名单。武汉各区一、二、三批次高中…

《Java设计模式》之桥接模式

Bridge模式的概念 Bridge 模式是构造型的设计模式之中的一个。Bridge模式基于类的最小设计原则,通过使用封装,聚合以及继承等行为来让不同的类承担不同的责任。它的主要特点是把抽象(abstraction)与行为实现(implement…

cad中tk什么意思_设计中的“Neobject”什么意思?来了解一下

DesignArchitectureInteriorsFashionArtTransportTHE STUFF THAT REFINES YOU破界造物New Language?“Neobject,言如其字,从语义上,前缀 neo- 表示新的,object 则是物体,是客观存在,很中性,作动…

html文段源码,HTML 段落

HTML 段落HTML 可以将文档分割为若干段落。HTML 段落段落是通过 标签定义的。实例这是一个段落这是另一个段落尝试一下 注意:浏览器会自动地在段落的前后添加空行。( 是块级元素)不要忘记结束标签即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显…

c#如何实现叫号操作_微信预约排队叫号系统操作指南

“微信排队预约"功能是阿拉善盟税务局为进一步优化营商环境,深化“放管服”改革,提高纳税便利度,更好地服务于阿拉善经济社会发展而开发的一项便民措施。通过“微信排队预约”功能,纳税人可以随时随地通过微信获取办税大厅的…

计算机用户越权操作的原因,“三员系统”中常见的越权问题

原标题:“三员系统”中常见的越权问题一、越权访问越权访问(Broken Access Control,简称BAC)是Web应用程序中一种常见的漏洞,由于其存在范围广、危害大,被OWASP列为Web应用十大安全隐患的第二名。1.1越权访问的产生比如&#xff0…

富士施乐2022网络扫描设置_富士施乐(FUJI XEROX)全系列复印机产品介绍

富士施乐(FUJI XEROX)复印机全系列详解富士施乐复印机是中小型办公环境的理想机型。所有的都拥有高效生产力和强大的稳定性,无论您需要亮丽色彩、黑白打印、亦或是足以应对复杂文档工作流的强大功能,总有一款适合您。DocuCentre S2110NDocuCentre S2110N…

JavaMail(四):接收邮件

2019独角兽企业重金招聘Python工程师标准>>> 接收邮件采用POP3协议进行接收,简单的一个接收邮件案例如下 /*** 接收邮件*/ public static void receive() throws Exception { // 准备连接服务器的会话信息 Properties props new Properties(); props.se…

jqgrid本地数据例子_办公系统私有云公有云和本地化部署,你选哪个?

随着互联网和云计算技术的发展,我们常常会听到:私有云、公有云和本地化部署,它们分别代表什么意思?无论是国企、民企还是外企,只要有数据,就要思考:到底将数据储存在哪里?选择轻流进…

计算机基础应用的培养活动记录,小学少年宫计算机兴趣小组活动记录表

小学少年宫计算机兴趣小组活动记录表 小学少年宫计算机兴趣小组活动记录表 活动名称:计算机 指导教师: ⅩⅩ 学生姓名 活动地点 计算机教室 活 动 过 程 活动1.认识计算机 ①师:“请同学们按下方盒子上面像大钮扣一样的按钮&#…

哪个计算机无法做到双屏显示,怎么启用双屏显示设置【图文介绍】

随着生活质量的提升,人们对于便利的要求越来越高,电脑的双屏显示成为现在用户越来越关注的对象之一。比如炒股操作中,人们既要关注大盘的走动趋势,又要关注特定股票的走势,在普通的屏幕上就需要不断地切换页面&#xf…

1.django 开发环境搭建

2019独角兽企业重金招聘Python工程师标准>>> 本教程使用的开发环境 本教程写作时开发环境的系统平台为 Windows 10 (64 位),Python 版本为 3.5.2 (64 位),Django 版本为 1.10.6。 建议尽可能地与…

改jpg_|我来改第04期|—人物海报设计

【我来改第04期】人物海报文案内容-Ad copyhttps://pan.baidu.com/s/16pz9_rcLXTGZ3xzKFjKN9g 密码: r57t设计要求-Requirement尺寸:1080(高)*650(宽)像素,大小不大于5m设计要求:以目前的蓝色为主要颜色(R:47,G:87,B:130),画面体…

计算机领域中dns是什么意思,dns错误是什么意思?dns错误要如何解决?

随着网络的普及,电脑已经成为我们生活中必不可少的物品,它可以帮助我们工作和学习以及娱乐。不过电脑在使用的过程中,常常会出现一些问题,小编觉得最常见也最让人心生烦躁的就是输入网址打开之后出现网页打不开,提示dn…

Launch Instruments

Launch Instruments 该仪器应用在Xcode应用程序,所以推出是在Xcode的最直接的方式。你也可以启动它间接地通过码头,启动,或命令行。The Instruments app lives inside the Xcode app, so the most direct way to launch it is from within Xc…

dataframe数据标准化处理_数据处理中的标准化、归一化究竟是什么?

关注上方“Python数据科学”,选择星标,精彩文章不会错过!今天说一个比较重要的内容,无论是在算法建模还是在数据分析都比较常见:数据归一化和标准化。开始之前,请你先把网上看到的所有相关的博客、帖子都忘…

java输出不同颜色_Java设计模式-策略模式、状态模式

推荐阅读:一只Tom猫:都是“Redis惹的祸”,害我差点挂在美团三面,真是“虚惊一场”!java喵:6大面试技能树:JAVA基础JVM算法数据库计算机网络操作系统前言当代码中出现多重if-else语句或者switch语…