Emlog pro博客添背景图片及背景透明教程【默认模版】

（一）添加背景图片

修改    main.css    文件，emlog的主题模板下，找到主题的“main.css”文件，打开它，找到body命令行（默认模板body在第一行），我们在body后加入代码使它变成这样

-image:url("images/bj.jpg"); background-repeat:no-repeat; Background-attachment:fixed; color:none;

说明：

           body {background-image:url("images/bj.jpg"); //背景图片地址

           background-repeat:no-repeat; //决定图片的平铺模式

           Background-attachment:fixed; //设置背景图像是否固定或者随着页面的其余部分滚动

注意：源"background: #FFFFFF;"要替换掉,"body {" 不要重复！

平铺模式

滚动部分

color:none;

（二）背景半透明处理

其中中间有一个白色的地方，把图片的大部分都遮盖住了，这样几乎等于没有加背景，那么要怎么办呢？

有的人会说，把这些部分的“background-color”属性全部设置成“none”不就行了吗？

确实，这是比较粗糙的做法，这样设置后可能会使背景图片的颜色极其影响文章的阅读。所以，我们要使这个白色区域半透明！

代码都是相同的，但是由于emlog的模板比较简单，所以这里用emlog来举例，大家可以自己修改wordpress的试试。

同样是“main.css”文件，我们可以找到“#wrap”这一行属性，代表的就是这个白色的区域。

这里要感谢cnf2e的代码，他的源码在此利用rgba和filter设置CSS背景颜色半透明且不影响子元素，兼容IE6-8

原理的确是使用rgba以及滤镜，但是他的源码添加上去之后，这个白色区域是变成黑色的半透明，个人觉得黑蒙蒙一片不好看，所以就改成白色半透明。

修改后的代码如下，加入在“#wrap”这一行就可以了。其实大家可以自己尝试修改成红色/绿色/蓝色半透明等各种颜色。

#wrap {background: rgba(255,255,255,0.6);background: transparent\9;zoom:1\8; /* required for the filters */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* IE8 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* IE5.5-7 */

background: rgba(255,255,255,0.6);   //这里就是设置rgb三种颜色以及透明度，一般透明度是0.6就足够了，rgb颜色大家可以自己调成自己喜欢的颜色

注意：源    "background: #FFFFFF;"    要替换掉，“#wrap {”不要重复！

相關 博客程序