- nicehost
-
◆空间背景半透明
在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下:
{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
具体参数含义如下:
opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
以上的参数可以选用,可以只设置一个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 这就是背景全透明的代码
各模版ID请参照链接:百度空间CSS说明
不过这样的话,相关模版的主要区域是透明了,可是底下还会有一条颜色留着的,所以另外还要在
.modbl{}
.modbc{}
.modbr{}
中也加入背景全透明的代码,这样才能让模版区域完全透明,就像我现在的效果一样
另外这个参数目前只能用于背景色的设置,背景图片无法设置为半透明
如果不想设置全透明的话,可以把.modbl{}.modbc{}.modbr{}三个中的background:transparent改成.modbox{}中的background-color:#FFFFFF,当然这里的#FFFFFF你可以换成自己喜欢的颜色,不过为了美观统一,建议这4个的颜色代码最好设置为一样的
附:#FFFFFF就是white,白色;#000000就是black,黑色
.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}
.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF}
modbl{background-color:#FFFFFF;border-left:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;line-height:1px}
.modbc{background-color:#FFFFFF;border-bottom:1px solid #FFFFFF;line-height:1px}
.modbr{background-color:#FFFFFF;border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;line-height:1px}
- 真可
-
* 回复内容中包含的链接未经审核,可能存在风险,暂不予完整展示!这是我做的教程,简单明了,一看就懂!
◆空间背景半透明
在模块区域找到.modbox,.modbl,.modbc,.modbr这四组编码开头的部分,把它们一一换成:
.modbox{padding:10px 10px 0 10px;background-color:#4949C8;border-left:1px solid #4949C8;border-right:1px solid #4949C8}
.modbl{background:transparent;border-left:1px solid #4949C8;border-bottom:1px solid #4949C8;line-height:1px}
.modbc{background:transparent;border-bottom:1px solid #4949C8;line-height:1px}
.modbr{background:transparent;;border-right:1px solid #4949C8;border-bottom:1px solid #4949C8;line-height:1px}
最后在模块区域的最后加上全码:
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=60);-moz-opacity:0.8;width:auto !important;width:100%}
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=60);-moz-opacity:0.8;width:auto !important;width:100%} 其中的(opacity=60)为透明度, (opacity=0)全透明 (opacity=100)不透明
看8懂模块区域,就参考一下这里吧:http://www.b***.com/search/hi/hi_css.html
---------------------------------------
Ω我的小屋:http://hi.b***.com/823xu
欢迎来做客!
- meira
-
让你的空间半透明!
在 #m_blog div.tit{font-size:14px;font-weight:bold}
上面的空白处插入下面这句代码就好了
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
如果想要透明效果更明显,
修改
.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
把其中的filter:alpha(opacity=80);80改小一点就好了,比如改成50,看看效果。
回答者: liliangui - 举人 五级 8-21 21:30
- coco
-
* 回复内容中包含的链接未经审核,可能存在风险,暂不予完整展示!http://hi.b***.com/llwws/blog/item/10946963708670600d33fa24.html
http://hi.b***.com/llwws/blog/item/238d03e982a23a3fb90e2d25.html
从这开始
.mod{margin-bottom:10px}
.modhandle{cursor:move}
.modth{height:24px}
.modhead{padding:4px 4px 0 4px}
.modopt{padding:4px 4px 0 0}
.modtit{color:#000000;font-size:12px;font-weight:bold}a.modtit{color:#000000}a.modtit:visited{color:#000000}
.modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtitlink{color:#FFFFFF;text-decoration:none}a.modtitlink:visited{color:#FFFFFF;text-decoration:none}a.modtitlink:hover{color:#FFFFFF;text-decoration:underline}
.modact{color:#000000;font-size:12px}a.modact:link{color:#000000}a.modact:visited{color:#000000}
到这是空间全透代码