网页百度页面的圆形遮罩是怎么做的?

html-css014

网页百度页面的圆形遮罩是怎么做的?,第1张

方法一：

HTML5+CSS，注意，只有支持HTML5的浏览器才行，百度的也一样，我用搜狗浏览器切换到IE内核就变成正方形图片了。代码如下

<style>

img {

-webkit-border-radius: 50%

-moz-border-radius: 50%

-ms-border-radius: 50%

-o-border-radius: 50%

border-radius: 50%

}

</style>

<body>

<img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/ting/s%3D90/sign=f04adce1d42a60595610ed1a2834fa08/b2de9c82d158ccbfcdc485121ad8bc3eb1354199.jpg">

</body>

方法二：

把图片设置成DIV的背景，然后在DIV里再装一张有圆形孔的GIF图片，中间的圆形孔做成透明。

此方法兼容所有浏览器。

◆空间固定背景

把第一行变成

body{background:url(图片地址) no-repeatbackground-position: centerbackground-attachment: fixed}

找到stage{background:#F3F1F1}

把其中的background:#F3F1F1删除.只留下stage{}

另外，还要把高级设置的自定义模板中设成“无背景图”

方法：点击“设置” →“高级设置”，找到“自定义模板”→“开始自定义”→再把其中的“背景图片”设置为“无背景图”。

这样图图才会显示出来。

◆空间背景半透明

在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不同范围的透明度。

具体方法如下：

找到.mod……编码开头的模块区域部分，在它们的最后加上全码：

.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=60)-moz-opacity:0.8width:auto !importantwidth:100%}

opacity=60为透明度，默认的范围是从0 到 100，他们其实是百分比的形式。

0=完全透明

100=不透明

看8懂模块区域,就参考一下这里吧：http://www.baidu.com/search/hi/hi_css.html

-------------------------------------

Ω我的小屋:http://hi.baidu.com/823xu

欢迎来做客！