看惯了明暗主题,今天我突然想实现一下更加丰富的页面颜色。
我的想法是:每天随机获取一个背景图片,然后稍加处理让其适应明暗主题。
随机获取简单,可若每天获取同样的图片,对于我来说首先想到的是给个时间判断,或者说是缓存键值。可是我又不想再去写一段判断的代码了,于是用 ai 搜索了一下,竟然发现了一个叫做随机种子的东西,于是乎,就这么容易的实现了。
一、之前的随机获取图片代码
function getRandImage()
{
$img_array = glob(dirname(__FILE__) . '/images/bgdemo/*.{gif,jpg,png,jpeg,webp,bmp}', GLOB_BRACE);
// if (count($img_array) == 0) die();
$rand_img = basename($img_array[array_rand($img_array)]);
echo Helper::options()->themeUrl . '/images/bgdemo/' . $rand_img;
}二、加入是否使用随机种子的判断
function getRandImage(bool $srand = false)
{
$img_array = glob(dirname(__FILE__) . '/images/bgdemo/*.{gif,jpg,png,jpeg,webp,bmp}', GLOB_BRACE);
if (empty($img_array)) {
return; // 或抛出错误
}
if ($srand == true) {
// 基于日期的随机种子
$seed = (int) date('Ymd');
mt_srand($seed);
$index = mt_rand(0, count($img_array) - 1);
mt_srand(); // 重置随机数生成器
} else {
// 使用 array_rand() 直接随机选择
$index = array_rand($img_array);
}
$rand_img = basename($img_array[$index]);
return Helper::options()->themeUrl . '/images/bgdemo/' . $rand_img;
}三、在需要使用随机种子的地方调用
ps:css 使用的是 tailwindcss 的通用类
<!-- 模糊图片背景 -->
<div class="fixed inset-0 bg-no-repeat bg-center brightness-150 dark:brightness-50 -z-10 opacity-40 dark:opacity-40" style="background-image: url(<?php echo getRandImage(1); ?>); background-size: 10000%;">
<div class="fixed inset-0 backdrop-blur-xl"></div>
</div>然后我的网站每天就会随机从图库中获取一张背景图了。今天的首页效果如下,期待明天能获得一张更加亮丽的背景图。
四、介绍一下php的随机种子
这里其实用到了2个函数,mt_rand() 和 mt_srand() ,他们是 PHP 中基于 Mersenne Twister 算法(一种高质量、快速的随机数生成算法)的生成伪随机数的一对函数。
mt_srand() 用于手动设置随机数生成器的种子(seed)。
mt_srand($seed); // $seed 是一个整数mt_rand() 用于生成一个伪随机整数。
mt_rand(); // 返回 0 到 mt_getrandmax() 之间的整数
mt_rand($min, $max); // 返回 $min 到 $max 之间的整数(含边界)注意:如果不设置种子(seed),PHP 会在首次调用时自动初始化一个种子(通常基于系统时间或熵源),之后每次运行脚本都会产生不同的序列。
By:ymz316
In:

https://picsum.photos/260/60?random=1(2,3,4)我使用的这个,可以试试。
这个用的api接口获取随机图片吧,是个不错的选择 😄
暗色背景的优点:省电节能,对保护眼睛有好处(特别是类似晚上等暗光情况下)。
盯着屏幕看确实需要暗色背景,不过这里为了满足大家喜欢亮色的感觉,还是做了一点点修改。
说的不是首页顶部的图片而是是文章背景么?是不是太过模糊了, 没有看的出来图片。
为了看出来是图片,我将图片缩小到200%,同时去掉了几张体验不好的背景图。 😅
说的是文章背景,放大后色彩变化没这么明显,而且又加了高斯模糊。今日的背景图是->这个,取的是图片中央的部分。
还是喜欢白底看着舒服
其实我也喜欢白底,干净。先感受一下这个抽盲盒的感觉吧,有些背景色还是挺好看的
随机颜色 ,联想起老式充电器的随机跑马灯效果。当然变换不会那么快。
老式充电器还有这个效果啊,现在都趋向于外观单一,色彩单一了。
厉害了,为啥不直接搞随机渐变色,比加载图片更快。
之前有考虑,头部代码中有一段注释的渐变色代码,就是难得调色彩😁
今天这背景适合看电子书
秋天的颜色 😀
测试了一下首页,每次刷新都会变成新的图片,点击图片就是文章
每天一变的是网页的背景图,只不过放大了100倍及加了模糊您没注意到。