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

2019-09-13 郑州网站建设  

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>半透明实例在线演示 css5.com.cn</title>

<style>

.div-a{ bac公斤round: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实现半无色 浏览器中阅读完成DIV半透明成绩截图

总结:依照以上两个实例,第一个没有设置装备摆设半无色技俩,其余一个配置半透明格局而完成了div层半无色功效,大家大约遵循需要调整半透明值,实现想要半通明度。设置装备摆设半透明成绩要思量IE浏览器、google、火狐等浏览器兼容赞成,以是我们半透明名目代码务必完整。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2201.html转载请标明出处,谢谢合作!
标签:
  • 实例
  • 样式
  • 设置
  • 半透明
  • css
  • DIV
  • 咱们