在编写html静态页面的时候,我们经常会遇到设置页面透明度的样式要求。那么怎么设置页面透明度呢?
首先我们看一个CSS透明样式实例:
div{
opacity:0.5;
}
这个实例是将div的透明度设置为0.5也就是一般透明。
下面看下opacity的语法使用:
opacity: value|inherit;
值 | 描述 |
value | 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 |
inherit | 应该从父元素继承 opacity 属性的值。 |
(PS:value和inherit之间的“|”是或的意思,很多人知道,但是提示下不知道的,因为我曾经也没有想到。。。)
最后是在javascript中使用opacity的语法:
object.style.opacity=0.5
这个实例是将object对象的透明度设置为0.5。
下面是我写的实例以及效果图,大家可以参考参考:
-
使用CSS样式实现样式
源代码:
(PS:由于代码在文中没有样式,大家看起来会比较麻烦,所以我讲代码采用了截图的方式,若是有需要我将代码贴出来的,可以留言~~~)
实例效果:
-
使用javascript实现样式
源代码:
样式方面和CSS实现的是一样的,大家可以参考上面的~~~