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

很简单的，嗯，就是要做成这样的：

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

首先准备这样两张图片：

宽19px，高32px

宽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;

}

那么，在网页中的代码就该这么写了：

OK，就这样，试试吧，嗯！

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

php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
5去掉button按钮的点击样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
写在前面最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 <di ...
django中html中图片路径怎么写,django css样式,图片路径问题解决方案
在用Django 做项目时,如果在本地调试的情况下,我们会开启 settings.py 中的 DEBUG = True 同时我们还会做如下操作: 1. 设置 STATIC_ROOT = os.path ...
html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容
这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示:然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接.下面就是 ...
html图片颜色变深,利用CSS改变图片颜色的100种方法！
前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover的时候, ...
html图片后边自动底部对齐,css实现图片与文字底边对齐
css实现图片与文字底边对齐通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题. ...
html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
html中如何使图片自动旋转90度,css实现图片旋转90度的方法
css实现图片旋转90度的方法发布时间:2020-08-31 11:44:39 来源:亿速云阅读:550 作者:小新小编给大家分享一下css实现图片旋转90度的方法,相信大部分人都还不怎么了解, ...
html怎么让图片自动动起来,使用css让图片动起来
使用CSS让图片动起来需要使用transform属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 默认值: none 继承性: no 版 ...

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

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

最新文章

热门文章