Random CSS background
推到 Facebook!
推到 Twitter!
推到 Plurk!
今天想给个人blog换个背景background，现在都是流行写在CSS里头。
选了好几张相片，可是CSS只能设置一张背景。
如
1 2 3 | body { background: url(http://img401.imageshack.us/img401/7982/speedlikecy01.jpg) center no-repeat } |
可是只能设定一张，有点枯燥的感觉。
想到Ideal是，每次打开blog都会随机展示不同的背景。
Random CSS background rotater
网路上找到一些相关的，但是都要嵌入网页里头。简单说就是要修改php or html。
我想要的是给css的background一个网址，然后会自动随机展示不同的背景。
Ideal加上网路上的搜索，最后想到利用简单的php来达成。
?Download random_css_background.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <?php /******************************************************************************* * Please Do Not delete the message for debug * Title: random_css_background.php * Version: 1.0 @ July 09, 2010 * Author: speedlikecy * Website: speedlikecy.001zone.com ******************************************************************************** You can get the detail from here http://diy.001zone.com/blog/352/random-css-background Check the sample speedlikecy.001zone.com Please feel free to use it and to contact me for any reason Feature: Random and rotate output the images Link for the CSS style Usage: 1.Download this sample code and edit. "random_css_background.php" 2.Upload to website. 3.Replace the URL at CSS style. "background:url(http://example.com/random_css_background.php)" *******************************************************************************/ //set the images urls //设定图片的位置 $images = array( "http://img541.imageshack.us/img541/378/smilesn.jpg", "http://img401.imageshack.us/img401/7982/speedlikecy01.jpg", "http://img338.imageshack.us/img338/9566/speedlikecy02.jpg", "http://img535.imageshack.us/img535/75/taiwanlanyu.jpg", "http://img686.imageshack.us/img686/1931/togetherhand.jpg", ); //random function //乱数函数 srand(time()); //set the images number in (rand()%5); this sample is 5 //设定图片的数目 $random = (rand()%5); //output to url //输出结果 header('Location:'.$images[$random]); ?> |
使用方法：
random_css_background.zip
复制或者下载上面的code，修改后上传到网路上。
修改CSS，如background: url(http://example.com/random_css_background.php)。
完成。
范例：
speedlikecy.001zone.com
每次游览都会随机更换背景图片。
其他使用方法：
CSS + DIV。
?Download sample.css
1 2 3 | #random_img { background: url(http://example.com/random_css_background.php) center no-repeat; } |
1 | <div id="random_img"><!--- your contain ---></div> |
直接调用
1 | <img src="http://example.com/random_css_background.php"/> |
No related posts.
