css实现半透明的代码分享

发布时间：2021-09-06 18:38:14 作者：chen
来源：亿速云阅读：104

本篇内容主要讲解“css实现半透明的代码分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css实现半透明的代码分享”吧!

　　DIVCSS半透明基础介绍设置DIV半透明CSS代码：

　　div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;}

　　说明：

　　1、filter：对winIE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认

　　2、-moz-opacity：对mozillafirefox火狐浏览器实现半透明，winIE不认此属性，-moz-opacity:0.5相当于设置半透明为50%

　　3、opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity:0.5;表示设置50%半透明

　　为了观察到对DIV半透明实现，我们设置两个DIV层，分别一个放于另外一个DIV层内，外层DIV命名为“.div-a”;上面被包含的层CSS类命名为“.div-b”，形成“.div-b”盒子放于“.div-a”内

　　我们对底层DIV设置一个背景是一张图片，上面的DIV盒子设置村黑色。

　　未设置CSS半透明样式实例

　　根据描述实例，未设置半透明HTML源代码：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8"/>

　　<title>半透明实例在线演

　　<style>

　　.div-a{background:url(div-a-bg.png)no-repeat;width:230px;height:136px;padding:10px;}

　　.div-b{background:#000;width:200px;height:100px;padding:5px;color:#F00}

　　</style>

　　</head>

　　<body>

　　<divclass="div-a">

　　<divclass="div-b">DIV半透明实例演示</div>

　　</div>

　　</body>

　　</html>

到此，相信大家对“css实现半透明的代码分享”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关阅读