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

利用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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为WordPress文章添加公众号引流模块

    仿照着WPMEE文章底部的公众号模块写的,之前扒了扒css,一直有问题就放在那里了,今天突然开窍。就自己试着写了一下。

    AlexTao
  • css适配屏幕尺寸大小自适应

    改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样式。

    AlexTao
  • WordPress美化-缩略图&整站添加圆角、边框、阴影

    我觉得自己的审美是在一直在变化的,总是感觉还会有更好的效果。那就要不断的更改尝试。

    AlexTao
  • vuejs小例子之实现图片的切换

    绝命生
  • 三、jQuery属性操作

    2、如何操作属性 对象.属性名称 = 值 对象.属性名称 对象[‘属性名称’] = 值 对象[‘属性名称’] Javascript

    Dreamy.TZK
  • 修改Mirages主题文章布局

    关键点:修改了自适应中对主要文章内容的最大宽度。同时也把字号和代码的行高整一下,看起来更舒服,把下面的代码写入主题设置的自定义 HTML 元素拓展 - 标签: ...

    乐心湖
  • 可爱的rem

    嗯,这种的样式的工作量超级大,因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过~~~

    嘉明
  • Python练手小项目(一)——在图片上加上数字

    当一门语言学到了一定程度,我们就需要不断地做项目以加强对其的理解及应用。github上有一个很有意思的练手项目合集:show-me-the-code。今天要写的...

    李志伟
  • 趣图:我那可爱的无用代码

    我那可爱的无用代码 ↓↓↓ ? 英文:Daniel Stori 汉化:Roy@程序员的那些事 觉得本文对你有帮助?请分享给更多人。

    程序员宝库
  • jsp实现轮播图

    背景 支持ie老版本没办法使用比较新的框架,只能使用原始js实现。 演示地址 实现功能如下:

    崔笑颜

扫码关注云+社区

领取腾讯云代金券