仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1084|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 学习下DIV+CSS网页结构技能实例3:设置层的通明度

[复制链接]
柔情似水 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:40:19 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效(要把子div撑大只能考里面的元素)。偶然候我们必要用到层的通明度,把下边的背景显露出来,以下图:


这类半通明的情势在blog上使用对照普遍,那末这类效果是怎样做出来的呢?用JS,NO,NO,既然我们是CSS结构教程,那末就只管用CSS来办理成绩!
filter:alpha(opacity=70);
opacity:0.7;
把这两句代码到场到要完成半通明层的CSS款式内外便可,复杂吧!!
注:70和0.7的值可改成你必要的
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>尺度之路www.ckuyun.com——div层半通明效果</title><style>body{background:url(/upfile/images/bg.jpg)}#layout{position:absolute;top:50px;left:50px;width:500px;height:500px;border:1pxsolid#006699;background:#fff;filter:alpha(opacity=70);opacity:0.7;}</style></head><body><divid="layout"></div></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
说实话,我并不是反对div+css,但物生一利,必生一弊,div+css的利处大家说了很多,我就说说狂热的追求div+css的几个弊端:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-18 15:29

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表