网站背景随机图片并实现模糊效果 内容不模糊 随机背景图超简单方法
超简单实现随机图片API,可随机浏览图片,也可做自己网站的随机背景图片使用。
演示效果:星海幻鲸实验室 有用有趣有价值 (xhhjm.com)
实现的方法也很简单,具体可阅读本文。
支持类型
下方代码提供支持gif,jpg,png,jpeg,webp,bmp等格式,也可自行更换、添加其他格式。
文件路径
会查找文件根目录下的images目录下的所有图片,并随机挑选出一张显示出来。
实现代码
实现详细代码如下:
<?php
$img_array = glob('images/*.{gif,jpg,png,jpeg,webp,bmp}', GLOB_BRACE);
if(count($img_array) == 0) die('没找到图片文件。请先上传一些图片到 '.dirname(__FILE__).'/images/ 文件夹');
header('Content-Type: image/png');
echo(file_get_contents($img_array[array_rand($img_array)]));
?>
随机背景
实现随机背景样式详细代码如下:
<style type="text/css">
body {
background-image: url("http://lab.xhhjm.com/picapi/api/index.php");
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
如果需要实现网页背景模糊内容不模糊,可以增加一个空DIV
<div class="bg"></div>
给空的DIV设置模糊作为整体背景
.bg {
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #ccc;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
background-image: url("http://lab.xhhjm.com/picapi/api/index.php");
filter: blur(5px); <!-- 模糊度 越大越模糊 -->
}
代码简洁实用,简单的实现了随机图片API,可以作为自己网站的随机背景图片使用。