十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
css设置透明度,首先需要知道的是在浏览器中的不同使用,一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度,而在firefox中,一般就是直接使用opacity:0,对于兼容的,一般的做法就是在书写css样式的将2个都写上就行,就能实现兼容,具体看代码:
成都创新互联致力于互联网网站建设与网站营销,提供成都网站设计、网站制作、网站开发、seo优化、网站排名、互联网营销、重庆小程序开发、公众号商城、等建站开发,成都创新互联网站建设策划专家,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
html
head
#div1{
width:200px;
height:600px;
margin:0 auto;
opacity:0;
filter:alpha(opacity=0); //0 代表的是隐藏,就是透明度最低。
}
/head
body
div id='div1'
p测试文字。/p
/div
/body
/html
怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。
div class="box"/div
style
.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}
/style
其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码,当opacity值为1时,表示完全不透明,为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3;这是“最重要的”,因为它是在CSS的现行标准。这将在Firefox,Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。
filter:alpha(opacity=30);这一个是针对IE浏览器
-moz-opacity:0.3;你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。
-khtml-opacity: 0.3;这是旧版本的Safari(1.×)当渲染引擎是使用仍被称为kthml,而不是目前的WebKit。
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盒子设置村黑色。
二、未设置半透明样式实例 - TOP
1、根据描述实例,未设置半透明HTML源代码:
!DOCTYPE html
html
head
meta charset="utf-8" /
title半透明实例在线演示 ;/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半透明样式实例 - TOP
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半透明实例在线演示 ;/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、在浏览器效果截图:
css div半透明实现截图
css+div实现半透明 浏览器中浏览实现DIV半透明效果截图
总结:根据以上两个实例,第一个没有设置半透明样式,另外一个设置半透明样式而实现了div层半透明效果,大家可以根据需要调整半透明值,实现想要半透明度。设置半透明效果要考虑IE浏览器、谷歌、火狐等浏览器兼容支持,所以我们半透明样式代码务必完整。
您好,
如果你想设置背景颜色得透明度,可以用background:rgba(r,g,b,a)其中a为透明度,从0-1
如果你想设置整体透明度,可以使用css属性opacity:0到1;
在一些网站的登录页面上,经常可以发现,一张图片叠加在另一张图片上,底层的图片若隐若现,利用css中的透明属性opacity可以实现这种效果,下面就简单介绍一下怎么写代码
新建一个HTML文件,下载两张图片,如下图,放在一个文件夹中,避免出现路径问题
代码示例如下,主要利用css伪元素::before,F_box为前置层,浮于背景上方
下面简单分解下代码,分为1,2,3,第一部分,设置背景图片001.jpg;第三部分,固定前置层图片002.jpg的位置;第二部分,利用伪元素::before,设置属性opacity来调节透明度,取值为0-1,0是全透明,即看不见的效果,1是全不透明
代码示例中,设置opacity为0.5,半透明状态,实际页面效果如下
style="background:rgba(51,51,51,0.1);"
前三51为颜色的rbg代码,后面0.1背景颜色的透明度,1为不透明,0.1代表10%透明度