css 如何实现随机背景图？

Posted 2023-04-27

不要 JS 代码哦，只要 CSS 的~~~~~~~~~~

另外我的 CSS 背景格式如下，按照如下写就可以~~~

bodybackground:#FFF url(bg.jpg) repeat-x left top;

css只负责静态样式，无法做任何逻辑运算，如果需要随机背景，需要js配合使用

// 首先，定义一个数组，用于存放所有的背景图片
var arr = new Array();
// 将所有背景图放入arr内
arr.push('背景图地址', '背景图地址', '背景图地址');
// 随机获得一个键值
var bg = Math.floor((Math.random() * arr.length));
// 将背景图片放入body的css中
$('body').css('background-image', arr[bg]);

   

参考技术A 那天我在社区看到一个
bodybackground:#FFF url(bg.php) repeat-x left top;

人家在bg.php里做文章本回答被提问者采纳 参考技术B “只用CSS”就想实现随机背景图片
佩服！
你要是实现了
你就是神了…… 参考技术C http://www.jz00.com.cn/ASPjishu/ASPyingyong/1306.html
自己瞧去吧 参考技术D 偶也，楼主强人！

写了一个随机图片API接口，用来做博客园随机背景，欢迎使用，禁止爬取，需要套图可以直接联系博主

原来还有人看，现在地址是http://116.62.5.101，https://116.62.5.101，http://www.zhulinan.love

___________________________________________________________________________________________________________________________

 

20190917更新，今天早上发现接口突然不能用了显示ERR_TIMEOUT，上服务器看了一下进程还在运行，初步推测是web服务器的问题，

flask是个web框架，也做了web服务器，但是非常的简单，只用flask做调试还可以，真的部署稳定性存在问题，所以这两天打算部署到nginx上

 

 

接口地址：https://116.62.5.101:5000/，欢迎使用，图片资源是https://www.cnblogs.com/CooperXia-847550730/p/10533558.html贴中爬取的兔玩君套图中的100+套。

这是我的博客园css代码，背景url填入随机图片API接口地址，就可以做到随机的图片背景效果

body {
color: #000;
background: url(https://116.62.5.101:5000/) fixed;
background-size: cover;
background-repeat: repeat;
font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

 

先挂一下效果，这是作为博客背景的效果：

 

 

 

 

这是作为图片接口的效果：

 

 

 

实现非常简单，还是使用了flask框架，这里就是全部的代码了：

from flask import Flask, request, render_template, redirect, send_file
from random import choice
import os
app = Flask(__name__)

@app.route(\'/\')
def hello_world():
dirpath = "sets/"
deeppaths = [i for i in os.listdir(dirpath)]
deeppath = dirpath + choice(deeppaths) + "/"
filenamelists = [i for i in os.listdir(deeppath)]
filename = deeppath + choice(filenamelists)
return send_file(filename)

if __name__ == \'__main__\':

app.run(host=\'0.0.0.0\',port=5000,ssl_context=(\'server.crt\', \'server.key\'))

这里主要代码就是写一个随机选择，这是图库的文件地址，会随笔选择套图和图片：

 

 

因为博客园会自动将url的http转为https，所以这里部署成了https，需要申请ssl认证，因为博主没有域名，所以就自己使用openssl 命令配置了一个不受信的证书，但是不影响使用，

有域名的同学，可以直接在aliyun里申请免费的第三方证书。

首先安装：pip install pyOpenSSL

然后生成证书，按照配置要求填写信息就可以了：

openssl genrsa -des3 -out server.key 1024
openssl req -new -key server.key -out server.csr
cp server.key server.key.org
openssl rsa -in server.key.org -out server.key
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt