随机网站背景

Author： XSY
发布时间：August 7, 2018
14342 views
12 comments
908 words
Categories：技术文档

## 前言
是的，一如既往的水文，仅仅是给出一个自制的接口和几行代码就来水文，我是有多么大的勇气啊，哈哈
## 正文

### 接口介绍
接口使用后刷新网页会自动变换网站背景图片，图片具有平铺居中且不重叠的特点，适合各种类型的网站使用。如果您看腻了千篇一律的背景色，那不妨给网站加个自动变换背景图片的功能吧。

### 接口地址
国内版地址：https://xsy.app/bing/api.php
国际版地址：https://xsy.app/bing/global.php
（仅支持https访问）

### 使用方法
#### 方法一
找到您网站的全局公共css文件，然后把下面的代码粘贴至所有代码最上面
```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接口地址
```html
<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
<html style="background: url(接口地址) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">
```

#### 方法四
加到网站全局顶部文件中 `<body>` 标签内，可根据情况自定义修改api接口地址
```html
<body style="background: url(接口地址) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">
```

Last modification：January 14, 2019

If you think my article is useful to you, please feel free to appreciate

12 comments

地下城堡
July 1st, 2019 at 11:59 pm

不好意思啊，每次评论后都弹出评论失败的字样，害我评论了三次

Reply
1. XSY
  July 2nd, 2019 at 06:48 am
  
  @地下城堡
  
  我的锅我的锅OωO
  
  Reply
地下城堡
July 1st, 2019 at 11:58 pm

请问网站的全局公共css文件在哪,网站全局顶部文件又在哪？

Reply
1. XSY
  July 2nd, 2019 at 06:52 am
  
  @地下城堡
  
  公共css是在assets里面的，顶部应该是在/component/header.php，不知道不同主题目录结构是不是一样，但是我这里就是这样的。
  
  Reply
孟小N
August 27th, 2018 at 04:37 pm

出差回来，过来留个小脚印

Reply
1. XSY
  November 4th, 2018 at 05:49 pm
  
  @孟小N
  
  嘿嘿
  
  Reply
test
August 23rd, 2018 at 09:29 pm

踩踩

Reply
鳄鱼皮具
August 21st, 2018 at 11:49 pm

这个会不会减慢熟读呢？

Reply
1. XSY
  August 22nd, 2018 at 12:49 pm
  
  @鳄鱼皮具
  
  嗯，会的
  
  Reply
过滤沙缸
August 11th, 2018 at 10:58 am

这是怎么安装

Reply
1. XSY
  August 11th, 2018 at 03:57 pm
  
  @过滤沙缸
  
  直接加代码啊，你这都不会就不要搞了
  
  Reply
lalal
August 8th, 2018 at 07:23 pm

文章很不错啦，谢谢博主

Reply