Web前端html中通过CSS来设置div背景颜色透明度

web前端开发中很多时候需要在html中通过CSS来设置div背景颜色透明度,分享一下Html/Css标签透明度效果的实现,在html中,实现半透明背景。

下面是效果图:

Web前端html中通过CSS来设置div背景颜色透明度-上流阁

html、css代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html背景颜色透明</title>
<style type="text/css" >
.wh{
width: 100px;
height: 100px;
}
.bg{
background: #C7EDCC;
}
.bg1{
background: rgba(199,237,204,0.5);
}
.bg2{
background: #C7EDCC;
filter:alpha(opacity=50); /* ie 有效*/
-moz-opacity:0.5; /* Firefox 有效*/
opacity: 0.5; /* 通用,其他浏览器 有效*/
}
</style>
</head>
<body>
html背景颜色透明
纯背景background: #C7EDCC;
<div class="wh bg">
上流阁
</div>
透明背景background:rgba(199,237,204,0.5);
<div class="wh bg1">
上流阁
</div>
文字背景都透明
<div class="wh bg2">
上流阁
</div>
</body>
</html>

*文章为作者独立观点,不代表上流阁立场
本文由 江风成 授权 上流阁 发表,并经上流阁编辑。转载此文章须经作者同意,并请附上出处(上流阁)及本页链接。原文链接https://www.o6c.com/web/2016/10/22/379.html
发表评论

1 条评论
  • 沙发 rays 

    很好使,直接把background: rgba(199,237,204,0.5);加到css里就完事.谢谢

相关文章
thinkphp PHPExcel网页暂时无法连接连接ERR_INVALID_RESPONSE信息解决办法
thinkphp PHPExcel网页暂时无法连接连接…
html5手机端播放器可拖动播放自定义播放器
html5手机端播放器可拖动播放自定义播放器
Web前端html5网页three.js、earth会转动的地球
Web前端html5网页three.js、earth会转动…
jQuery on()动态加载点击事件失效
jQuery on()动态加载点击事件失效
Bootstrap中折叠面板panel-group手风琴效果属性详细说明
Bootstrap中折叠面板panel-group手风琴…
joomla文件上传之com_media组件修改上传重命名文件方法
joomla文件上传之com_media组件修改上传…
javaweb开发程序员php开发,微信开发。接受定制开发

最新评论