您的位置首页百科知识

CSS重叠半透明图标如何制作

CSS重叠半透明图标如何制作

的有关信息介绍如下:

CSS重叠半透明图标如何制作

无论是网站开发还是网页开发,百度终究是很多小伙伴最终的选择。我个人做全栈开发几年仍旧依赖于百度,因为一个人不可能单靠自己完全掌握各方面开发知识。好了,废话不多说,下面我讲一下网页前端开发中CSS两个或多个半透明重叠图标如何制作,目的就是为了丰富开发知识。

先让大家看一下最终效果。有人可能要问为什么先看最终效果,因为很多人搜索的问题可能与自己最终的理想效果并不匹配,所以这里先让大家看一下完成后的效果,如果不是自己理想的结果就不必往下看了

首先打开开发工具,例如HBuilder(一般开发工具都可以,这里只是推荐大家使用HBuilder,个人感觉HBuilder在前端开发方面还是非常好用的)。以下是HBuilder进去后的界面

我们简单些三个div,目的只是为了让大家了解这种重叠半透明图标的制作过程。具体如何开发大家只需要根据这里的讲解使用到自己的项目中就可以。HTML界面只需要三个div,我就不放图片了。代码基本是

主要是CSS部分,需要大家了解掌握的是:1.opacity(控制透明度,取值0~1,值越小透明度越大)。2.position(这里要用两个值,一个是relative,一个是absolute,大家可以百度搜一下这两个值,百度上讲的非常清楚,我在这里就不多说了)。最外层div的position值设为relative。内层两个div值设为absolute,然后根据重叠的尺度设置top、left、right、button的值。我放一张图片大家可以借鉴一下

实际开发中大家按照自己的项目来进行开发就行了。希望对各位有所帮助