给网站添加背景图片并设置半透明
本方法适用于wordpress和emlog，兼容绝大部分浏览器。
经常看到自己的网站一片白花花的当然会很不爽，所以就折腾着要给自己的网站添加背景图片，但是设置了背景图片却出现了一大块白色，当然，解决的办法有很多。
（一）添加背景图片
首先要添加背景图片到你的网站，如果你是wordpress，很高兴看到wordpress本来就有“外观”-“背景”这么一个功能，上传你喜欢的图片就可以啦。
但是如果你是emlog，那么就要修改你的模板下的样式表了，一般是在模板文件夹下的“main.css”文件，打开它，找到body命令行（默认模板body在第一行），我们在body后加入代码使它变成这样
body
{background-image:url(images/background.jpg);
background-repeat:no-repeat;
Background-attachment:fixed;
color:none;
}这里解释一下
body {background-image:url(images/background.jpg); //背景图片地址
background-repeat:no-repeat; //决定图片的平铺模式| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
| Background-attachment:fixed; | 设置背景图像是否固定或者随着页面的其余部分滚动 |
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
| 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: transparent9;
zoom:18; /* 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颜色大家可以自己调成自己喜欢的颜色经过测试，确实兼容绝大部分浏览器，如有需要，大家还可以参考一下”背景半透明最佳实践“这篇文章，或者给我评论留言。
