网站随机背景图片api调用接口,让网站每次刷新都变换为不同的背景图片
in 各种技术 with 5 comments

网站随机背景图片api调用接口,让网站每次刷新都变换为不同的背景图片

in 各种技术 with 5 comments

这个是由云图床提供的接口,主要作用就是:当网站背景调用该接口时,每次刷新都会变换不同的背景图片,每次都不一样的用户体验。

接口介绍

使用后刷新网页会自动变换网站背景图片,图片具有平铺居中且不重叠的特点;图片分为3种类型:游戏图片、二次元图片、简约图片,适合各种类型的网站使用。如果您看腻了千篇一律的背景色,那不妨给网站加个自动变换背景图片的功能吧。

官网地址

https://api.yuntuchuang.com/

接口地址

随机游戏图片:https://api.yuntuchuang.com/api/youxi.php
随机二次元图片:https://api.yuntuchuang.com/api/acg.php
随机简约图片:https://api.yuntuchuang.com/api/jianyue.php

随意一个都行,也可以复制网址到输入栏预览一下效果

参数

type=json

JSON调用格式

随机游戏图片:https://api.yuntuchuang.com/api/youxi.php?return=json
随机二次元图片:https://api.yuntuchuang.com/api/acg.php?return=json
随机简约图片:https://api.yuntuchuang.com/api/jianyue.php?return=json

JSON数据

{

"code":"200" #图片状态码
"acgurl":"https:\/\/ws1.sinaimg.cn\/large\/0072Vf1pgy1foxkfy08umj31kw0w0nng.jpg" #图片地址
"width":"2048" #图片宽
"height":"1152" #图片高

}

使用方法

找到您网站的全局公共css文件,然后把下面的代码粘贴至所有代码最上面

html {
  background: url(接口地址) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

加到网站全局顶部文件中 <head></head> 标签内,可根据情况自定义修改api接口地址

<style> 
html {
  background: url(接口地址) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

加到网站全局顶部文件中 <html> 标签内,可根据情况自定义修改api接口地址,修改后代码如下

<html style="background: url(https://api.yuntuchuang.com/api/acg.php) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">

加到网站全局顶部文件中 <body> 标签内,可根据情况自定义修改api接口地址,修改后代码如下

<body style="background: url(https://api.yuntuchuang.com/api/acg.php) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">

效果图

www.tiezi.xyz (1) (1).jpeg

相关推荐

《使用PHP每日自动抓取Bing每日图像并保存到本地,附源码》

《不使用任何第三方api接口,每次刷新网页都随机变换背景图片》

《专注且干净的壁纸下载网站,支持下载4K壁纸》

Responses
  1. ssr

    非常给力,谢谢啦

    Reply
  2. 好用好用,一次搞定,非常棒

    Reply
  3. 用在了我博客上,好用,壁纸也都很漂亮

    Reply
  4. 实用干货,谢谢分享

    Reply
  5. 发个帖子!做个test~

    Reply