文档章节

css实现透明的两种方法

Bing309
 Bing309
发布于 10/21 15:57
字数 178
阅读 9
收藏 0

一、opacity:0~1

值越高,透明度越低:

div{
opacity:0.5    
}

选择器匹配到的节点们,包括节点们的孩子节点,都会实现%50透明,另 0.5 可直接写成 .5

二、rgba(0~255,0~255,0~255,0~1)

rgba(0,0,0,0.5) :

 

div{
background-color:rgba(0,0,0,0.5);
}

 

选择器匹配到的节点们,当且仅当匹配到的节点,不包括其孩子节点,透明度为50%,(0,0,0)表黑色,而(255,255,255)表白色。

© 著作权归作者所有

Bing309
粉丝 0
博文 39
码字总数 6692
作品 0
浦东
前端工程师
私信 提问
兼容几乎所有浏览器的透明背景效果

当今的大部分网页设计都包含了半透明的元素.但用CSS实现想要的效果却没那么简单. 现存的问题 如果我们想要一个半透明背景,有两种实现方式: – 利用CSS和opacity属性 – 建立一个24位PNG背景图...

glowry
2014/05/03
430
3
IE6 png图片实现半透明的方法

IE6中支持PNG半透明图片完美解决方法-divcss5亲測 从IE7及IE7以上版本号都支持PNG半透明格式图片,而只有IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由此我们迫不及待...

云栖希望。
2018/01/06
0
0
CSS3实现背景透明,文字不透明

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度。 效果如下: 这样貌似也满足了需求,不过并不...

neromaycry
2018/06/23
0
0
CSS 5种很炫的Hover效果。跳,放大,旋转,淡入,悬浮

给平淡的站点带来活力 hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹...

筱飞
2016/03/24
2.7K
0
IE6 png图片实现半透明的方法

IE6中支持PNG半透明图片完美解决方法-divcss5亲測 从IE7及IE7以上版本号都支持PNG半透明格式图片,而只有IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由此我们迫不及待...

云栖希望。
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端的一些雕虫小技,从100%和滚动条说起

1、100%和滚动条 当我们在css中把html和body同时设为100%时,会出现滚动条 html, body { width: 100%; height: 100%; } 原因是html和b...

wphmoon
今天
6
0
电力区块链应用案例【2019】

随着区块链技术的日益普及,出现了大量创业企业尝试使用区块链技术来解决能源与电力行业中存在的问题。在本文中,我们将介绍其中的三个能源区块链项目。 能源行业以价格不透明著称:消费者很...

汇智网教程
今天
9
0
聊聊rocketmq的adjustThreadPoolNumsThreshold

序 本文主要研究一下rocketmq的adjustThreadPoolNumsThreshold DefaultMQPushConsumer rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/consumer/DefaultMQPushConsumer.ja......

go4it
今天
10
0
关于早起

早起是非常好的事情,但是像如果前一天睡得晚,或者第二天早上是非常冷的时候,那就不是很美好了。 但是本身早起是一件非常棒的事情,我记得我每次早起 如果不觉得困的话,世界是那么安静,脑...

T型人才追梦者
今天
7
0
Java输入输出

JDK中的InputStream/OutputStream构成了IO输入输出继承层次的基础。它们都是面向字节序列的,每次可以从序列中读入或者写出一个字节或者指定大小的字节数组。但是面向字节流的输入输出不便于...

ytuan996
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部