利用PHP实现404页自动更换图片附api-钻芒博客

前几天分享了N 款自适应的 404 页面源码不过归其还是要自己换图片来实现。

PHP写了个随机图片，404页面直接调用，达到每次访问图片随机显示效果。

404页面样式里添加了图片大小自适应，以及图片圆角和位置修正。

性感钻芒，在线修图。

效果如下

搭配钻芒图床，实现特定账号上传图片至图床，博客404页面背景图自动更新

css写了个图片自适应大小及圆角显示。

PHP随机输出图片（可支持多种图片格式）

<?php $img_array = glob("./*.{gif,jpg,png}",GLOB_BRACE); $img = array_rand($img_array); header("location:$img_array[$img]"); echo $img; ?>

404界面及div样式(图片处理css都有写注释)

 <!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title>404页面 - 钻芒博客</title> 		<meta name="renderer" content="webkit" /> 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> 		<!--[if lte IE 8]> <script> location = "/ie.html?url=" + encodeURIComponent(location.href); </script> <![endif]--> 		<style> 			*{ padding:0; margin:0; box-sizing: border-box;font-family: "微软雅黑"; } 			body,html{ width:100%; height:100%; } 			img{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 			.container{ max-width:90%; margin:0 auto; padding:80px 0px; } 		.bg{  		display:block; max-width:100%; margin:0px auto; 		/* border:2px solid darkslategray; /*/图片添加边框/*/*/ 		background: darkcyan;				      /*定位居中*/           	width:100%;							/*横向拉伸*/     		height:auto;						/*纵向自动匹配大小*/                 border-radius:30px;					/*圆角值*/                 text-align: center;					/*元素的文本对齐方式*/                 line-height: 200px;					/*设置以百分比计的行高*/                 max-width:500px; 					/*最大宽度值*/                 max-height:300px;					/*最大高度值*/    		align-items:center;					/*元素居中显示*/   		justify-content:center;				      /*元素居中显示*/     		              } 		.btn{ width:400px; margin:0 auto; max-width:100%; margin-top:40px; } 		.btn a{ float:left; text-decoration: none; width:46.5%; border:1px solid #5298ff; background:#5298ff; color:#FFF; display:block; height:46px; line-height:44px; text-align:center; font-size:16px; border-radius:3px; overflow: hidden; } 		.btn .goindex{ margin-right:7%; } 		.btn .lx{ border: 1px solid #d8d8d8; background: #ffffff; color: #8c8c8c; } 		@media screen and (max-width: 500px) { 		.btn{ width:85%; } 		.btn a{ width:100%; font-size:15px; height:42px; line-height:42px; } 		.btn .goindex{ margin-right:0; margin-bottom:20px; } 			} 		</style> 	</head> 	<body> 		<div class="container"> 			<img src="https://img.zmki.cn/img" class="bg" /> 			<div class="btn"> 				<a href="/" class="goindex">回到首页</a> 				<a href="https://wpa.qq.com/msgrd?v=3&uin=20838641&site=qq&menu=yes" target="_blank" class="lx">联系站长</a> 				<div style="clear: both;"></div> 			</div> 		</div> 	</body> </html>

在图片文件夹内创建一个PHP随机输出，然后404界面图片调用即可。

随机图片api

https://img.zmki.cn/img/index.php

只拿来做404页背景图或许有点太单调了，实际上也可以用来写广告位banner随机图片，单个图标ico随机（效果会太花里胡哨）。甚至文章缩略图也能指定图片随机显示。等等等等…只要是能插图片的地方，都可以用随机图片API。

· 如同一滴水里看见汪洋大海 ·

——此项目完成需鸣谢

PHP指导老师
小和博客

End.

版权声明 1 本网站名称：钻芒博客
2 本站永久网址：www.zuanmang.net
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END