css透明度,css图片透明度设置方法

在一些网站的登录页面上,经常可以发现,一张图片叠加在另一张图片上,底层的图片若隐若现,利用css中的透明属性opacity可以实现这种效果,下面就简单介绍一下怎么写代码

操作方法

  • 01

    新建一个HTML文件,下载两张图片,如下图,放在一个文件夹中,避免出现路径问题

  • 02

    代码示例如下,主要利用css伪元素::before,F_box为前置层,浮于背景上方

  • 03

    下面简单分解下代码,分为1,2,3,第一部分,设置背景图片001.jpg;第三部分,固定前置层图片002.jpg的位置;第二部分,利用伪元素::before,设置属性opacity来调节透明度,取值为0-1,0是全透明,即看不见的效果,1是全不透明

  • 04

    代码示例中,设置opacity为0.5,半透明状态,实际页面效果如下

(0)

相关推荐

  • Excel怎么设置图片透明 excel2010图片透明设置方法教程图解

    在EXCEL2010工作簿插入一幅标志图片时,会发现标志图片带一个白色的底,那怎么能将这个白色的背景去掉了,EXCEL的图片工具中有这么一个功能:设置透明色功能,下面为大家讲解Excel怎么设置图片透 ...

  • 微信怎样恢复过期或已被清理的图片 微信恢复过期图片的设置方法

    微信是我们常用的聊天软件,有时手机内存不足,我们会清理一些缓存,但是有些重要图片也被清理了,那么微信怎样恢复过期或已被清理的图片?下面小编带来微信恢复过期图片的设置方法,希望对大家有所帮助. 微信恢复 ...

  • chrome浏览器保存整个网页为图片的设置方法

    Chrome是一款非常受欢迎的浏览器,在使用浏览器的时候经常需要将整个网页进行截图,360浏览器可以直接将网页保存网页保存为图片,但是对于Chrome浏览器来说,不少人还不知道怎样截图完整的网页图片, ...

  • ACDSee怎么给图片设置DPI? 图片dpi设置方法

    在进行图片编辑的时候,比如说简历图片,或者是网络上上传图像等,会出现对图片的长宽进行限制的情况,这时候就要对图片的大小进行编辑,那么如何改变图片的大小尺寸呢,DPI如何进行设置呢,小编在这里使用电脑自 ...

  • 小米手机动态壁纸/图片壁纸设置方法

    小米手机动态壁纸和图片壁纸怎么设置呢?请看下面的操作步骤. 操作方法 01 首先,打开MIUI系统设置页面,在设置选项中,点击选择"壁纸"选项. 02 接下来,在打开的壁纸设置页面 ...

  • word重新编辑形状的环绕顶点? word文字环绕图片的设置方法

    word文件插入图形以后,发现插入的形状不符合自己的环绕要求,怎么修改呢?下面我们就来看看word'重新编辑环绕顶点的方法,请看下文详细介绍. 1.打开word,编辑好文字,如下图: 2.在菜单栏中找 ...

  • 在word中插入的图片怎么设置呢?

    word作为办公软件其中的一种,在我们的工作中起着非常重要的作用,熟悉word软件的操作是我们必备的技能,本节教程主要介绍怎样在word文档中插入图片,以及对插入的图片如何进行设置,一起来看看吧. 1 ...

  • 手机抖音背景图片怎么设置

    抖音是我们常用的短频频软件之一,接下来小编就教大家怎样设置背景图片.具体如下:1. 首先打开手机进入到桌面,然后在桌面上找到抖音图标点击打开,进入到抖音界面之后,点击右下角的我的选项.2. 然后我们就 ...

  • CSS背景背景颜色的设置和使用透明度实例说明

    CSS背景图片和颜色是否美观是给网页第一印象最直观的感觉,我们在设置网页的时候合理使用背景图片和背景颜色能为网页增添不一样的感觉.今天我就来详细分析和讲解背景颜色的设置的三种方式和背景颜色透明的相关的 ...

  • PPT2003/2007/2010中设置图片透明度教程

    PPT2003设置图片的透明度 ①首先,点击菜单栏的“插入”,然后在弹出的下来菜单中选择“图片”中的“自选图形”; ②根据自己的需求来插入形状,比如我要将长方形的图片设置透明度,这里我插入矩形; ③右 ...