css 中的background:transparent到底是什么意思有什么作用
点评:css 中的 transparent到底是什么意思? 一直觉得很奇怪,到底有什么用的啊?,本文将详细说明,需要的朋友可以参考下
有时我在看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" οnclick="alert(1)">123</div>
正常情况下,只要你点击这个div的任何位置,都会alert的,但是当它被一个backgroundcolor为transparent的元素遮住的时候,我们只有点击123才会alert,因为文本是可以获得焦点的,同理其他元素也一样.顺便说下,这个backgroundcolor为transparent的元素的事件会对被它遮住的元素所截获.如果我们所触发的对象没有焦点,那么事件会交换给transparent的元素处理并按这个元素进行冒泡,否则有焦点的会事件便由有焦点的那个对象处理,不会交换,并且按有焦点的元素进行冒泡.(貌似不是很好理解,可以自己多做做试验就明白了)
这样说,大家明白了吧,这也是为什么要后两句的原因了,只有这样才能对网页元素进行完全屏蔽.
设置样式为透明色
有时,上文写了
background:inherit;
那么下文就可能要清除一下背景,就写了
background:transparent;
透明背景,也就是去掉了被
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent
css 中的background:transparent到底是什么意思有什么作用相关推荐
- CSS中的background的详细属性
本文转自:http://blog.sina.com.cn/s/blog_969555e3010135s6.html css2中有五个与背景相关的属性.它们是: background-color:完全填 ...
- 细说css中的background属性以及一些问题
1.background的属性 1.1background-color 属性设置元素的背景颜色. 这种颜色会填充元素的内容.内边距和边框区域,扩展到元素边框的外边界(但不包括外边距).如果边框有透明部 ...
- css怎么恢复清背景,常用的CSS中背景background使用技巧
css教程 说明 background-image:url("图片的网址"); 背景图 background: url(" 图片的网址 "); 背景 ba ...
- CSS 中的 background 背景属性命令大全
1.background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. 属性值 说明 scroll 背景图片随页面的其余部分滚动.这是默认 fixed 背景图像是固定的 in ...
- css中的background属性
文章目录 一:background-repeat 二:background-position 三:background缩写方式 三:background-size 四:background-origi ...
- css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
- CSS奇思妙想 -- 使用 background 创造各种美妙的背景(上篇)...
本文将介绍一些利用 CSS 中的 background.mix-blend-mode.mask 及一些相关属性,制作一些稍微复杂.酷炫的背景. 通过本文,你将会了解到 CSS background 中 ...
- CSS奇思妙想 -- 使用 background 创造各种美妙的背景
本文属于 CSS 绘图技巧其中一篇,系列文章: 在 CSS 中使用三角函数绘制曲线图形及展示动画 CSS奇思妙想 -- 使用 CSS 创造艺术 将介绍一些利用 CSS 中的 background.mi ...
- (15)css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修 饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
最新文章
- 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言—— 1123:图像相似度
- 2019百度之星初赛1
- USACO Training Section 1.2 双重回文数 Dual Palindrom
- [css] 你有使用过哪些栅格系统?都有什么区别呢?
- 铺设道路(洛谷P5019题题解,Java语言描述)
- Android 获取静态上下文(Application)
- 家庭路由器哪家强:固件漏洞多年不修复,更新无济于事
- [python] 字典和列表中的pop()函数
- 关于公司建设的一些思考
- matlab:蚁群算法原理的实现
- 2018春招-今日头条笔试题-第四题(python)
- html修改progress背景色,html5 progress标签如何更改进度条颜色?progress进度条详解...
- Python爬取实习僧职位信息
- 【Proteus仿真】51单片机+直流电机PWM调速实验
- signingConfigs
- 20162307张韵琪 预备作业02
- 华为机试练习汇总(JS实现)
- 分享——网页上的虚拟机
- 什么是IP、MAC地址?图文解说它们之间的区别和联系
- 干货 || 如何在考博英语中拿高分
热门文章
- 宝物志分享:三星堆出土绝美黄金面具,制作工艺惊人
- 奈奎斯特定理和香农定理的理解
- @Autowired 构造方法作用
- 20.构造方法是什么?作用是?构造方法的特性
- 新版思科CCNA认证1.0 零基础入门技术VTP协议解析-ielab网络实验室
- 给你的网站添加谷歌AMP、百度MIP、神马MIP链接自动提交功能
- 读富豪、麻将和社会保障(卢辘轳)
- 推荐一款FPGA lattice 深力科电子LCMXO3LF-4300C-5BG324C 使得您的控制PLD和桥接设计能够跟上技术发展
- 微信公众平台开发之商品比价功能
- Android之玩转MPAndroidChart让(折线图、柱形图、饼状图、散... http://www.apkbus.com/thread-267832-1-1.html)...