修改wordpress背景带像素点的颗粒半透明点阵效果

作者:matrix 被围观: 3,862 次 发布时间:2013-09-13 分类:Wordpress 兼容并蓄 | 2 条评论 »

这是一个创建于 3849 天前的主题,其中的信息可能已经有所发展或是发生改变。

这里所谓的带像素点的颗粒效果如图,
远观效果(点击扩大):
修改wordpress背景带像素点的颗粒效果-远观

放大后:

修改wordpress背景带像素点的颗粒效果-放大后

刚开始还以为只是一层背景,原来是在大图背景的表面上覆盖一层处理的2*2像素图片作为首层背景,也就是两层图片覆盖而达到现在的效果。
步骤:

一.在主题style.css中添加代码:

div#div1{position:fixed; top:0; left:0; bottombottom:0; rightright:0; z-index:-2;}  
div#div1 > img {height:100%; width:100%;}  
#bg1{position:fixed;left:0;top:0;width:100%;height:100%;background:url('images/bg_under.png');z-index:-1;}  

说明,

z-index 属性是关于z轴方向(就视线方向)的层叠顺序。

第一行的z-index 属性为-2,处于最底层。其次高一点的是第三行的bg1的z-index 属性-1,如果不标注z-index层级会导致bg1背景方块浮与搜索框和LOGO的上方从而鼠标hover完全没有反应。

第三行的bg_under.png可自定义

bg_under.png下载:

http://pan.baidu.com/share/link?shareid=1970702697&uk=3238236832

附另外的像素背景图片:

2、http://pan.baidu.com/s/1u12j8
3、http://pan.baidu.com/s/1jGskaOm
3的效果图:
3效果图

4、http://pan.baidu.com/s/1i3l0Ig9

4的效果图:

效果图4

5、http://www.400gb.com/file/60184094
http://pan.baidu.com/s/1c0ciKpU
5的效果图:
效果5

6、 http://www.400gb.com/file/60295449
http://pan.baidu.com/s/1eQAABZ0
6的效果图:

效果6

 

效果6

二.在主题header.php适当位置添加:

<div id="div1">  
    <img src="http://127.0.0.1/wordpress/wp-content/themes/wp_typecho/images/24.jpg"/>  
</div>  
<div id="bg1"></div>  

说明,第二行的src值为背景大图的地址,可以填相对路径。

最终效果请实测,个人感觉 非常漂亮!

代码来自 孙华博客 非常感谢 ~也是看了他博客才中意此效果的。

经孙华博客的说明此效果为:半透明点阵,四分之一非透明图片的repeat效果

非常漂亮!

其他文章:
本文固定链接:https://www.hhtjim.com/modify-the-wordpress-background-pixels-particles-translucent-lattice-effect.html
matrix
本文章由 matrix 于2013年09月13日发布在Wordpress, 兼容并蓄分类下,目前没有通告,你可以至底部留下评论。
转载请注明:修改wordpress背景带像素点的颗粒半透明点阵效果-HHTjim'S 部落格
关键字:, , , ,

有2 条评论 »

  1. 谷歌优化 谷歌优化 2022-10-10 10:36:50 +0800#2

    确实挺好看的

  2. it's good article haha!download free now
    file encryption software http://windowssofware.weebly.com/home/what-is-a-file-encryption-key

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!