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 相关文章推荐
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 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生成随机数或者字符串的代码
2008/09/05 PHP
php实现水仙花数示例分享
2014/04/03 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
工作违纪检讨书
2014/02/17 职场文书
3的组成教学反思
2014/04/30 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
贫困生证明范文
2015/06/16 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android