什么都分享
以及,记录自己的故事
正在载入当前位置天气信息……

简易、效率的方法使网页前景半透明化(非css滤镜)

可能有些建站的朋友有过想要把网站的前景(也就是内容部分)做半透明处理,这样做显得整页的背景比较协调,大部分人都使用css的滤镜效果来使全站透明化,但是这样做是达到了效果,却影响了效能,对一些性能不高的网站主机来说,确实是麻烦事。

那么我也遇到了这个问题,我在处理的时候没走正道,另辟蹊径。

我的方法:简单来说,就是用PS或者一些美图软件制作一个1px*1px分辨率的半透明图片(png格式),然后在css内对应的标签使用background参数。使用半透明图片无限循环的来覆盖前景,以达到效果。

举例,我想将某个div内的背景做半透明处理,那么在css内的这个div标签内,写上background:url(“http://www.liujunyang.com/img/xxx.png”);background-repeat:repeat;background-size:100%;

其实就是用一个1像素点的图片做无限循环的覆盖,这样即不影响网站的加载速度,也达到了最终目的,也是一举两得。另外,在以后想改透明度的时候只需要把修改好的图片替换掉原来使用的图片就可以了。

有什么不懂的地方可以留言,我会再做解答。

打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 简易、效率的方法使网页前景半透明化(非css滤镜)
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏