CSS设置半透明背景实例详解

  次阅读 来源:互联网(转载协议) 2016-03-25 16:08 我要评论(0)

CSS设置半透明背景的方法有很多种,我这里根据自己的经验来与大学分享学习常用的CSS设置半透明背景设置方法总结。

无图片半透明背景css

如果,单纯地用背景色并结合opacity进行设置透明度,那么会出现子元素中的文字也同样出现透明的情况。

第二种情况:用png透明度合适的背景图,但这样的话,还得针对IE6进行PNG图片的灰色背景处理。

第三种方法:用rgba结合专用hack兼容常规浏览器。

Rgba进行背景色填充,并设置透明度,并不会导致子元素也继承其的透明度。例如:background:rgba(0,0,0,0.5);这句,就适合了支持CSS3.0的浏览器。但IE6、IE7、IE8,我们可以利用到IE滤镜的渐变进行设置,开始和结束的颜色都一样就行了,代码如下:

代码如下

复制代码

filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr = '#9A000000', endColorstr = '#9A000000' )9

(9A是透明度的16进制,例如上面,众所周知,透明度在IE中的值是1%~100%,之间,而在颜色中,透明度为100%的时候就是RGB的满值255,这时候,如果想设置0.6的透明度,就需要用255*0.6=153,这时候,这个154是十进制,我们还需要转换为16进制才能用,经过百度的转换器得出是9A,所以在开始和结束的颜色前面加上:9A)

具体参数含义如下:

pacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。

finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形

startx渐变透明效果开始处的 X坐标。

starty渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

以上的参数可以选用,可以只设置一个opacity

例如:

{filter:alpha(opacity=50)}

这个就是半透明的设置,只要把{}中的代码加入到需要设置的模版中的{}的即可,记得与前面的代码之间要用";"间隔,不然设置是无效的

例如:

我要设置模版区域背景的颜色(白色)+半透明

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

中都设置background-color:white

这些就是模版背景设置的ID

然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个

中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了

如果希望像我这样只显示blog的背景,别的都全透明的话,那么就在别的模版中加入背景全透明的代码即可

background:transparent这就是背景全透明的代码

不过这样的话,相关模版的主要区域是透明了,可是底下还会有一条颜色留着的,所以另外还要在

.modbl{}

.modbc{}

.modbr{}

中也加入背景全透明的代码,这样才能让模版区域完全透明,就像我现在的效果一样

另外这个参数目前只能用于背景色的设置,背景图片无法设置为半透明

我把我的背景半透明代码贴出来吧

代码如下

复制代码

.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 区块链最近太火,但A股多家公司明确表态不考虑涉足

    区块链最近太火,但A股多家公司明确表态不考虑涉足

  • 汤晓鸥:人工智能的中国式文艺复兴

    汤晓鸥:人工智能的中国式文艺复兴

  • 全球陷入"区块链狂热"潮,大规模应用还需等待

    全球陷入"区块链狂热"潮,大规模应用还需等待

  • 马云的新零售?张近东的智慧零售?抑或是刘强东的第四次零售革命?

    马云的新零售?张近东的智慧零售?抑或是刘强东的第四次零售革命?

网友点评网友点评
阅读推荐阅读推荐

算法 任何一个入门的软件开发人员都会听到这句话:算法是软件的灵魂!近年来大火的机器学习即是在算法在人工智能上的集中体现。今日头条通...

据《日本经济新闻》报道,日本东京大学教授稻叶雅幸等人开发出再现日本人骨骼肌肉构造的机器人。机器人各部位的肌肉和骨骼长度与日本人的平...

以奥黛丽-赫本为原型打造的人形机器人索菲娅首次拜访了印度。索菲娅是世界上首位获得公民身份的机器人,她在12月30日出现在了印度理工学院...

在查获现场,代售点电脑旁的一台机器人通过敲击电脑键盘抢票。 广州日报惠州讯 (全媒体记者秦仲阳 通讯员张中铃摄影报道)2018年春运售票已...