DIV CSS实现网页背景半透明效果


Posted in HTML / CSS onDecember 06, 2021

一、DIV CSS半透明基础介绍

设置DIV半透明CSS代码:

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

说明:

1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认
2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-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盒子设置村黑色。

二、未设置半透明样式实例

1、根据描述实例,未设置半透明HTML源代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>半透明实例在线演示 www.divcss5.com</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> 
<div class="div-a"> 
<div class="div-b">DIV半透明实例演示</div> 
</div> 
</body> 
</html>

2、未设置半透明CSS样式截图:

DIV CSS实现网页背景半透明效果

未设置半透明样式未实现半透明实例浏览器中效果截图

三、对DIV设置CSS半透明样式实例

1、我们对“.div-b”选择器加入半透明样式代码:

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;

设置60%半透明效果

完整实例网页HTML代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>半透明实例在线演示 www.divcss5.com</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; 
filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6} 
/* CSS注释说明:这里对CSS代码换行是为了让代码在此我要中显示完整,换行后CSS效果不受影响 */ 
</style> 
</head> 
 
<body> 
<div class="div-a"> 
<div class="div-b">实现DIV半透明实例演示</div> 
</div> 
</body> 
</html>

2、在浏览器效果截图:

DIV CSS实现网页背景半透明效果

css+div实现半透明浏览器中浏览实现DIV半透明效果截图

总结:根据以上两个实例,第一个没有设置半透明样式,另外一个设置半透明样式而实现了div层半透明效果,大家可以根据需要调整半透明值,实现想要半透明度。设置半透明效果要考虑IE浏览器、谷歌、火狐等浏览器兼容支持,所以我们半透明样式代码务必完整。

CSS3按钮透明光亮遮罩流动特效源码:https://www.3water.com/jiaoben/744063.html

再次记住需要半透明地方设置以下半透明代码即可:

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6

到此这篇关于DIV CSS实现网页背景半透明效果的文章就介绍到这了,更多相关div css半透明内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
在HTML中引入CSS的几种方式介绍
div与span之间的区别与使用介绍
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 #HTML / CSS
HTML5 新增内容和 API详解
Nov 17 #HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 #HTML / CSS
You might like
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
numpy.random模块用法总结
2019/05/27 Python
python读取Kafka实例
2019/12/23 Python
Python3开发环境搭建详细教程
2020/06/18 Python
详解KMP算法以及python如何实现
2020/09/18 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
期末考试动员演讲稿
2014/01/10 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
护士先进个人总结
2015/02/13 职场文书
庆七一主持词
2015/06/29 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python