css背景颜色设置为半透明,关于css设置背景色透明,半透明

更新时间:2023-07-28 04:18:39 阅读: 评论:0

css背景颜⾊设置为半透明,关于css设置背景⾊透明,半透明代码是
filter: Alpha(Opacity=50)
background-color: rgba(0, 0, 0, 0.5);
这种设置层⾥⾯所有的东西都透明了。
其实说到半透明,相信绝⼤部分同仁应该都知道的⼀种很常⽤的⽅法,即css3的opacity结合ie
应届生找工作
alpha滤镜即可。⽐如:
.translucent{
background:#000;
opacity:
0.5;
filter:
重阳节主题班会
蓝色英文progid:DXImageTransform.Microsoft.alpha(opacity=50);
}
上⾯这个样式类即为⼀个背景⾊为⿊⾊,元素半透明的样式类。这也是⽬前半透明遮罩层最常⽤的⽅法,(ps:有个⼩地⽅需要注意,在ie6
下需要触发它的haslayout或包裹性才有效,不过⼀般不存在问题,因为⼀般这种半透明遮罩的元素都是绝对定位的,overflow:hidden;或position:absolute;或float或display:inline-block都可以触发元素包裹性..这个问题扯远了,以后会单独再出⼀篇关于包裹性的⽂)
恩,正如各位看官所见,打开的层的确半透明了,不过半透明的好彻底,以⾄于层⾥⾯所有⼦元素都半透明了...但是我的层⾥⾯的图⽚和那
个红⾊的块本来是不打算透明的,我只要背景⾊透明就好了..所以这个⽅法并没有满⾜这个需求。
于是,针对只要背景⾊透明的东东,应该有另⼀种办法,就是css3的rgba属性结合ie的gradient滤镜
.bg-translucent{
background:rgba(0,0,0,0.5);
filter:progid:adient(startcolorstr=#7F000000,endcolorstr=#7F000000);
}
这个稍微复杂⼀点
性本色在CSS中有⼀个Alpha滤镜,这个滤镜可以设置⽬标元素的透明度。还可以通过指定坐标,从⽽实现各种不同范围的透明度。具体语法如
下:
{filter:
alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finish
具体参数含义如下:
大鱼海棠评价碧海社区opacity 透明度。默认的范围是从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)}
这个就是半透明的设置,只要把{}中的代码加⼊到需要设置的模版中的{}的即可,记得与前⾯的代码之间要⽤";"间隔,不然设置是⽆效的例如:
我要设置模版区域背景的颜⾊(⽩⾊)+半透明[就是我现在blog的效果]
只要在
.modbox{}
错误不可怕
.modbl{}
.modbc{}
.modbr{}
中都设置background-color:white
这些就是模版背景设置的ID
然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以⾃⼰加⼀个
中加⼊filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了
如果希望像我这样只显⽰blog的背景,别的都全透明的话,那么就在别的模版中加⼊背景全透明的代码即可
background:transparent 这就是背景全透明的代码
不过这样的话,相关模版的主要区域是透明了,可是底下还会有⼀条颜⾊留着的,所以另外还要在
.modbl{}
.modbc{}
.modbr{}
中也加⼊背景全透明的代码,这样才能让模版区域完全透明,就像我现在的效果⼀样
另外这个参数⽬前只能⽤于背景⾊的设置,背景图⽚⽆法设置为半透明

本文发布于:2023-07-28 04:18:39,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1099480.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:透明   设置   背景   半透明   透明度   模版
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图