背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从0到1,表示透明程度.…

一.opacity属性 1.opacity 习惯上说“透明度”,其实应该叫“不透明度”.opacity 意思:不透明,而背景色的默认值:transparent意思才是“透明的”.所以opacity用来设置不透明度,取值从[0.0~1.0],代表从完全透明到完全不透明,0.0就和transparent一样了,看不到但是实实在在存在. 默认值:1,完全不透明. Inherited:默认继承.所以给父元素设置opacity时,所有子元素也会继承opacity属性. <style> div{ back…

<TextBlock Text="阴影效果" FontSize="32"></TextBlock> <Border Height="50" Width="200" Background="Blue"></Border>…

例子: <div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px;opacity:0.5;background-color:silver;color:red">何问起<a href="http://hovertree.com/hvtart/bjae/q3etb2qv.htm" target="_blank">…

各个浏览器的解决办法: css: .opacity{ filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的浏览器*/} 用javascript来设定一个元素为半透明: object.filter = "alpha(opacity=" + opacity + ")&quo…

为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度与RGBA 及HSLA 有所不同,这种方式设置的透明度会对整个元素产生影响(元素的内容都会透明).反之,使用HSLA或RGBA 则可以仅让元素的某些部分有透明效果.这样,一个元素可以带有HSLA 透明背景,但内部的文字仍然不透明.…

问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animation: myfirst 2s;加上animation: myfirst 2s forwards;之后就可以了, 要实现的样式:div框淡出,但保证div的字体opoacity为1,要不然字体不清晰.(如果给div设置opacity,div子元素都会有透明度) 解决方案:用background-col…

今天写了个opacity, 竟然less编译不过,上网搜了一个写法 .opacity (@opacity) { @opacityPercentage: @opacity * 100; opacity: @opacity; -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))"; filter: ~"alpha(opacity = (@{opacityPerce…

用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: filter:alpha(opacity) Mozilla: -moz-opacity Safari: -khtml-opacity 很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity.(新版Opera已经支持opacity) 所以以前用CSS设定一个元素半透明的话…

一.CSS兼容代码 .transparent { filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* FireFox old version*/ -khtml-opacity: 0.5; /* Sarfari old version */ opacity: 0.5; /* FireFox */ } 二.Javascript兼容代码 if (!window.jasen.core.Util) { window.jasen.core.Util…