网站背景随机图片并实现模糊效果 内容不模糊 随机背景图超简单方法

超简单实现随机图片API,可随机浏览图片,也可做自己网站的随机背景图片使用。

网站背景随机图片并实现模糊效果 内容不模糊 随机背景图超简单方法-1

演示效果:星海幻鲸实验室 有用有趣有价值 (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,可以作为自己网站的随机背景图片使用。