最近摆弄几个网站，发现如果每次打开网站，大型banner的背景图片如果每次都有变化，那不是很有意思？于是折腾了一下。记录一下相关代码。
1，每次打开网页随机切换背景图片的JS方法
首先给这个div一个id，我们依靠这个id来获取他的css。做这个切换有两个小方案，第一个就是背景图片随机命名，然后把路径填入代码。代码如下
<script language="javascript">
image = new Array(4); //定义image为图片数量的数组
image [0] = './img/dfgsdfg.jpg' //背景图象的路径
image [1] = './img/uuuu.jpg'
image [2] = './img/cyyyy2.jpg'
image [3] = './img/asdg3.jpg'
image [4] = './img/capoiuuu4.jpg'
number = Math.floor(Math.random() * image.length);
var obj = document.getElementById("top-slider");
obj.style.cssText ="background:url("+image[number]+");background-position: 0 0; background-repeat: no-repeat; background-attachment: fixed; margin: 0 auto; background-size: cover;";
</script>
可以无限扩增背景图片数量.
第二个方案就是，像上面一样，但是背景图片按照一定的顺序命名，这样的话，上面那个数组就可以免掉，只要那个随机数函数就好了，省掉很多的代码
<script language="javascript">
number = Math.floor(Math.random() * 10);
var obj = document.getElementById("top-slider");
obj.style.cssText ="background:url(./img/bg"+number+".jpg);background-position: 0 0;background-repeat: no-repeat;background-attachment: fixed; margin: 0 auto; background-size: cover;";
</script>
上面的随机数是0到10，那么背景图片名字的名字就要修改为bg0.jpg，bg1,jgp。。。。，然后放到img目录就好了。如果你想放更多照片，扩大Math.random()的倍数就好了。
这段js代码放到div的下面，这样每次启动就可以随机切换背景图片了。注意点就是css代码不能简写，必须像上面一样表明每一个属性。
2，背景透明文字不透明的CSS方法
有时候在设计网页的时候，我们需要他的背景模糊，但是文字清晰，也就是我们说的背景透明或者半透明，而文字要清晰。
找了半天，发现这个设置分ie和标准浏览器，主要是rgba和filter:Alpha来作祟。后来找到一篇相当详细的文章，精品代码如下
.demo{
padding: 25px;
background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.demo p{
color: #FFFFFF;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
.demo{
background-color:#000000;
filter:Alpha(opacity=50);
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
.demo p{
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
}
对这个有兴趣的可以去看看这篇文章“CSS实现背景透明，文字不透明，兼容所有浏览器”，把我关注的这个背景透明的问题剖析的很清楚了。
mark下，方便以后使用。