EMLOG后台登录随机背景制作--附背景图片api接口--可开毛玻璃特效

    选择打赏方式

微信公众号伊伊兔Yi-Yi-Tu,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

Emlog博客后台登陆随机显示不同背景图的方法,

让你每次登陆后台都能看到不同的背景图片,想一想是不是有点小激动呢。

话不多说,下面就开始教程,

后台模板是杨小杰博客分享出来的,用起来很清爽,非常干净简洁又好看的一个后台界面。QQ截图20180421132453.jpgQQ截图20180421132507.jpg

模板的代码如下,使用方法:

网站目录下找到/admin/views/login.php文件替换里面的内容即可,替换之前一定一定一定要备份你的login.php文件!!!负责出错容易造成文件丢失!

<?php if(!defined('EMLOG_ROOT')) {exit('error!');}?>
<html>
<head>
  <meta itemprop="name" content="子成君博客后台"/>
  <meta itemprop="image" content="http://www.zcjun.com/logo.png" />
  <meta name="description" itemprop="description" content="账号:admin \r\n 密码:password" />
  <meta name="viewport" content="width=device-width">
  <meta name="author" content="Youngxj" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户登录</title>
  <!-- Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="./views/login/js/verificationNumbers.js" tppabs="./views/login/js/verificationNumbers.js"></script>
  <script src="./views/login/js/Particleground.js" tppabs="./views/login/js/Particleground.js"></script>
<style>
    body{background:url('这里填入随机图片背景api接口');background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;}
    /*web background*/
    .container{
      display:table;
      height:100%;
    }

    .row{
      display: table-cell;
      vertical-align: middle;
    }
    /* centered columns styles */
    .row-centered {
      text-align:center;
    }
    .col-centered {
      display:inline-block;
      float:none;
      margin-right:-4px;
    }
    .row-centered{
      z-index: 0;/* 为不影响内容显示必须为最高层 */
      position: relative;
      overflow: hidden;
    }
    .row-centered:after {
      content: "";/* 必须包括 */
      position: absolute;/* 固定模糊层位置 */
      left: -100%;/* 回调模糊层位置 */
      top: -100%;/* 回调模糊层位置 */
      background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
      filter: blur(20px);/* 值越大越模糊 */
      z-index: -2;/* 模糊层在最下面 */
    }
    .well{
      background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示,将背景颜色加深 */
    }
    .well {
      position: relative;
      margin: 0 auto;
      padding: 1em;
      max-width: 30em;
      border-radius: .3em;
      box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
        0 .5em 1em rgba(0, 0, 0, 0.6);
      text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
      background: hsla(0,0%,100%,.3);
      overflow: hidden;
      text-align:left;
      /*    -webkit-filter: blur(3px);
      filter: blur(3px);*/
    }
    .well::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      -webkit-filter: blur(20px);
      filter: blur(20px);
      margin: -30px;
      /*background: rgba(255,0,0,.5);*/
    }
  .form-control{background-color:rgba(255, 255, 255, 0);}
  #sizing-addon1{background:rgba(255, 0, 0, 0);}
  </style>
</head>

<body>
  <div class="container">
    <div class="row row-centered">
      <div class="well col-md-6 col-centered">
        <h2>欢迎登录</h2>
        <form action="./index.php?action=login" method="post" role="form" name="f">
          <div class="input-group input-group-md">
            <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
            <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户ID"/>
          </div>
          <div class="input-group input-group-md">
            <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
            <input type="password" class="form-control" id="pw" name="pw" placeholder="请输入密码"/>
          </div>
          <br/>
          <div class="createCode">
          <?php echo $ckcode; ?>
          </div>
          <div class="login-button">
            <div class="checkboxs"> <input type="checkbox" name="ispersis" id="ispersis" value="1" /><span><label for="ispersis">记住我</label></span></div>
          </div>
          <div class="login-ext"><?php doAction('login_ext'); ?></div>
          <button type="submit" class="btn btn-success btn-block">登录</button>
          <?php if ($error_msg): ?>
            <div class="login-error"><?php echo $error_msg; ?></div>
          <?php endif;?>
        </form>
      </div>
    </div>
  </div>


  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
<script>
  $(document).ready(function() {
    createCode();
  });
</script>
</html>


这里分享顾轩博客博主开源的一个随机动漫图片api的项目地址,Coding项目地址:点击进入

下面复制顾轩博客的话(๑•̀ㅂ•́)و✧

下载上传acgurl.php和sinetxt.txt文件到你网站目录,调用地址:http://xxx.com/acgurl.php 调用参数:return = json 返回标准json数据(图片地址) 请勿用于商业用途 转载请加出处 多谢合作~

下面附带两个不错的api接口

 

一个是清风博主的:

http://acg.woriqq.com/img.php
再一个是绚丽彩虹工作室的


http://acg.bakayun.cn/randbg.php

毛玻璃特效代码处已经有注释,自己调吧。

教程就到这了,有疑问博客留言噢!



版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:EMLOG后台登录随机背景制作--附背景图片api接口--可开毛玻璃特效 https://www.zcjun.com/emlog/28.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心

已有4条吐槽

匿名

2018-10-05 11:25 陕西省西安市 电信
救救我啊奥特曼,哪怕你只能撑三分钟……
 Windows 7 x64   QQBrowser 10.2.2265.400

00

2018-10-04 13:10 江苏省 移动
怎么更改主页随机背景 我用的模式是上传图片形式的
 Windows 7 x64   Liebao Browser

子成君

2018-10-04 13:16 江西省南昌市 电信
@00:模板里找到控制背景的语句<img src=后面的图片链接改成https://acg.toubiec.cn/random
 Windows 10 x64   UC浏览器 6.2.4094.1

匿名

2018-04-21 18:10 中国 移动
每个人都衣冠楚楚,从来没有人会关心光芒万丈的外表下那藏在角落的,发了霉的落寞。
 Windows 10 x64   UC浏览器 6.2.3964.2