欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > div css问集 >

HTML中如何利用DIV、CSS设置不透明度?

 

 

HTML中如何利用DIV、CSS设置不透明度?

在编写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。

下面是我写的实例以及效果图,大家可以参考参考:

  1. 使用CSS样式实现样式

    源代码:

    HTML中如何利用DIV、CSS设置不透明度?(PS:由于代码在文中没有样式,大家看起来会比较麻烦,所以我讲代码采用了截图的方式,若是有需要我将代码贴出来的,可以留言~~~)

    实例效果:

    HTML中如何利用DIV、CSS设置不透明度?

    HTML中如何利用DIV、CSS设置不透明度?

    HTML中如何利用DIV、CSS设置不透明度?

  2. 使用javascript实现样式

  3. 源代码:

    HTML中如何利用DIV、CSS设置不透明度?

    样式方面和CSS实现的是一样的,大家可以参考上面的~~~

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/wenji/w50643.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-07-08 17:27 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。