There are questions remain, We'll search for the answers together. But one thing we known for sure,the future is not set!

【MARK】随机切换背景图片的JS脚本和设置背景透明文字不透明的CSS方法

编程技术 百蔬君 3863℃ 已收录 0评论

 

最近摆弄几个网站,发现如果每次打开网站,大型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下,方便以后使用。

 

 

 

 

 

 

转载请注明:百蔬君 » 【MARK】随机切换背景图片的JS脚本和设置背景透明文字不透明的CSS方法

喜欢 (2)or分享 (0)
发表我的评论
取消评论

请证明您不是机器人(^v^):

表情