Don't forget that you have had a dream

    

站点添加动态高清背景图

前言

经常访问一些酷站的时候,我们会发现他们网站的背景图每次刷新都不一样,那这是怎么实现的呢?如果我网站上存储这么多照片,那需要多大的存储空间啊。有可能你会说用对象存储啊,天啦噜,上传不花时间啊[aru_20] !? 这篇文章就分享一个牛皮的网站及其接口的使用实现动态跟换网站背景图

接口介绍

官方网站:Lorem Picsum

基本用法:

  • 指定尺寸图片:https://picsum.photos/200/300
  • 正方形图片:https://picsum.photos/300
  • 在基本接口后添加参数?randomhttps://picsum.photos/200/300/?random
  • 使用/g/路径对图像进行灰度:https://picsum.photos/g/200/300
  • 使用/list路径获取图像列表。:https://picsum.photos/list
  • 返回示例:
    [
        {
            "format": "jpeg",
            "width": 5616,
            "height": 3744,
            "filename": "51492538696.jpg",
            "id": 0,
            "author": "Alejandro Escamilla",
            "author_url": "https://alejandroescamilla.com/",
            "post_url": "https://unsplash.com/post/51492538696/download-by-alejandro-escamilla"
        }
    ]  

获取确定的图片

  • 通过将?image=num附加到网址的末尾来获取特定图像:https://picsum.photos/200/300?image=0
  • 所有图片列表 go here
  • 通过将?blur附加到网址的末尾来获取高斯模糊的图像 https://picsum.photos/200/300/?blur
  • 通过将?gravity=east附加到网址的末尾来获取侧重裁剪的图像:https://picsum.photos/200/300/?gravity=east
  • 可选值:north, east, south, west, center

使用实例

注:参数可以配合使用:https://picsum.photos/g/1366/630/?random&blur

下面是本博客的使用效果,1366*630图片,随机,模糊。因为对博客内页的视觉不太友好,就放弃使用了,不考虑的小伙伴可以使用下 [aru_55]

https://file.whongbin.com/blog/img20190430115120.png

<style>
    #web_bg{
        position: fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        min-width: 1000px;
        z-index:-10;zoom: 1;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
</style>
<div id="web_bg" style="background-image: url(https://picsum.photos/g/1366/630/?random&blur);"></div>

您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 知识共享许可协议 进行许可。

评论已关闭

  更新日志

博客banner下方滚动文字替换为使用 一言API 随机获取 --- updated on 2019-05-22 09:04:31 星期三

  关于博主

三里林,一个致力于分享,分享心得,分享技术,分享知识点的个人博客

  近期评论

  分类目录

天要你走,我要你留

我想要山盟,你却带给我海誓。

“哦,要进画里了,孩子们,走好。”——将被二维化的罗辑

我是哑巴,你是瞎子,我们就这样保持最纯真的友谊,最遥远的爱情。

你的无畏来源于无知。

労働者の命は何よりも大切です。

我们都是阴沟里的虫子,但总还是得有人仰望星空。

旅行的意义在于找到自己,而非浏览他人。