有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的

有段时间没写文章了,一直在学校,虽然带着电脑,但是不能上网啊!最近在用javascript写一个网页版的操作系统,写好了一定发上来,写的过程中遇到很多问题,许多都是细节方面的,很麻烦,不过自己一直在努力解决,也是对自己的一种提高吧.下面我来说一下我最近遇到的一个问题.

大家知道,你用createelement新建一个div,默认情况下这个div的style中的backgroungcolor属性是transparent,呵呵,如果我做一个div的蒙板,那么请看下面一段代码:

复制代码

代码如下:

div.style.position="absolute"; 
div.style.width=document.body.clientWidth+"px"; 
div.style.height=document.body.clientHeight+"px"; 
div.style.left="0px"; 
div.style.top="0px"; 
div.style.zIndex="2000"; 
div.style.backgroundColor="black"; 
div.style.filter="alpha(opacity="+0+");"; 

这是很多蒙板div的设置,也就是说屏蔽用户对网页上的其他元素进行操作.

我们主要看后面两行代码,前面不是已经说了嘛,div的默认backgroundcolor属性就是transparent,也就是是透明,那么我们干嘛还要多此一举去设置个black(这个无所谓,随便设置个颜色,只要不是transparent就行,也不能是空字符串,浏览器会默认将空字符串看成transparent),并且设置滤镜让他透明呢.

我自己动手做了试验,一开始还对试验结果很迷惑,但自己静下来想想便发现了其中的区别,如果我们没有上面代码的后两句,那么我们便可以对蒙板后的元素进行操作,也就是说起不到屏蔽的作用,但是这个操作是有限制的,具体说就是我们只可以对有焦点的元素进行操作,比如文本,图片,按钮等,我举个例子:

复制代码

代码如下:

<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)">123</div>

正常情况下,只要你点击这个div的任何位置,都会alert的,但是当它被一个backgroundcolor为transparent的元素遮住的时候,我们只有点击123才会alert,因为文本是可以获得焦点的,同理其他元素也一样.顺便说下,这个backgroundcolor为transparent的元素的事件会对被它遮住的元素所截获.如果我们所触发的对象没有焦点,那么事件会交换给transparent的元素处理并按这个元素进行冒泡,否则有焦点的会事件便由有焦点的那个对象处理,不会交换,并且按有焦点的元素进行冒泡.(貌似不是很好理解,可以自己多做做试验就明白了)

这样说,大家明白了吧,这也是为什么要后两句的原因了,只有这样才能对网页元素进行完全屏蔽.

设置样式为透明色 
有时,上文写了

复制代码

代码如下:

background:inherit; 

那么下文就可能要清除一下背景,就写了

复制代码

代码如下:

background:transparent; 

透明背景,也就是去掉了被 
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent

文章有不妥之处还请各位指正,本文内容在ie7.0下测试通过.

css 中的background:transparent到底是什么意思有什么作用的更多相关文章

  1. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  2. css中设置background属性

    属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: backgrou ...

  3. css中的background属性

    第一次写博客,我就写写今天在编写网页的过程中,对background的两种运用,一是background中的线性渐变,对背景的渐变我其实是很少使用的,所以今天在写的时候我用css3的帮助手册,back ...

  4. CSS奇思妙想 -- 使用 background 创造各种美妙的背景

    本文属于 CSS 绘图技巧其中一篇,系列文章: 在 CSS 中使用三角函数绘制曲线图形及展示动画 CSS奇思妙想 -- 使用 CSS 创造艺术 将介绍一些利用 CSS 中的 background.mi ...

  5. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  6. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  7. CSS中背景图片的background-position中的left top到底是相对于谁的?

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  8. CSS中background的用法

    CSS中  background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...

  9. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

随机推荐

  1. xcode8 storyboard 控件显示错位

    升级xcode8 后选择device 为6s 出现上面的情况,控件显示异常.使用Update Frame 显示正常.不能选择Update Constraints   如果误选 commend + Z ...

  2. CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...

  3. crontabs Permission denied

    问题 jack@somemachine /data/jack $ crontab -e crontabs/jack: Permission denied 解决办法 sudo chown root:cr ...

  4. php两种导出excel的方法

    所需要的:jquery库,phpexcel插件,页面导出excel效果测试文件explode.php,excel导出功能实现文件exp.php和explode_excel.php,文件相关内容在此文下 ...

  5. Apache Spark源码走读之17 -- 如何进行代码跟读

    欢迎转载,转载请注明出处,徽沪一郎 概要 今天不谈Spark中什么复杂的技术实现,只稍为聊聊如何进行代码跟读.众所周知,Spark使用scala进行开发,由于scala有众多的语法糖,很多时候代码跟着 ...

  6. ZOJ1648 Circuit Board(线段相交)

    裸的判断线段相交

  7. 推荐一个可视化的学习Git的好网站:LearnGitBranching

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个可视化的学习Git的好网站:LearnGitBranching.

  8. bootstrap例子

    <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> &l ...

  9. 托管DLL和非托管DLL的区别

    首先解释一下,托管DLL和非托管DLL的区别.狭义解释讲,托管DLL就在Dotnet环境生成的DLL文件.非托管DLL不是在Dotnet环 境生成的DLL文件. 托管DLL文件,可以在Dotnet环境 ...

  10. 关于call_rcu在内核模块退出时可能引起kernel panic的问题

    http://paulmck.livejournal.com/7314.html RCU的作者,paul在他的blog中有提到这个问题,也明确提到需要在module exit的地方使用rcu_barr ...