css通过设置透明度可以得到遮罩效果 ， 今天咪咪我就来给大家讲解一下css透明度的设置方法 。 工具/材料 电脑
webstorm
操作方法 01 【css设置背景透明度】如图 ， 打开webstorm ， 然后新建一个html界面 ， 在html界面里面我添加了一个div标签 。
02 接着我们给body标签设置背景 ， 这里我就随意的给body标签添加了一个背景 。
03 之后 ， 打开浏览器预览 ， 可以看到body已经拥有了背景 。
04 接着我们再设置div的宽度高度并且设置成蓝色背景 。
05 再去预览看看效果 ， 可以看到div有了蓝色的背景 ， 但是背景是不透明的 ， 所以它就把原来body的背景给覆盖掉了 。
06 之后我们修改div的背景 ， 如图所示 ， 使用rgba,括号里面的最后一个参数0.4就是设置透明度的 ， 透明度从0到1 ， 越小表示越透明 。 前面三个参数是设置颜色的 。
07 之后 ， 再来看看效果 。 此时的div已经有了半透明的背景 ， 所以它就不会覆盖掉body的背景了哦 ， 这样就可以得到遮罩效果 ， 非常神奇哦 。
特别提示 哈哈 ， 可能我的背景图有点丑 ， 大家可以使用自己的背景图哦 ， 这里我只是介绍设置背景透明的思路 。
以上内容就是css设置背景透明度的内容啦 ， 希望对你有所帮助哦！
猜你喜欢
- pdf虚拟打印机如何加入背景
- 怎么设置电脑时间显示星期几？
- CAD标注样式颜色怎么设置
- 怎么样设置EXCEL表格中的页码？
- 怎么设置Word文档的段落
- Word怎么将图片设置为邀请函背景？
- 王者荣耀镜头移动如何设置
- 华为手机怎么设置照片分辨率
- 华为nova2plus呼叫转移怎么设置
- 华为手机怎么设置热点密码