博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
让你的博客不再单调 --博客园设置随机背景图片教程
阅读量:5927 次
发布时间:2019-06-19

本文共 3157 字,大约阅读时间需要 10 分钟。

 

 按惯例先上一张展示图片

要实现自定义随机图片即在后台【页面定制css代码】添加一段简短的代码即可

body {      background-color: #efefef;      background-image: url(http://lorempixel.com/1600/900);      background-repeat: no-repeat;      background-attachment: fixed;      background-position: center 0;      background-size: cover;   }

由上面的css代码不难看出

1
background-image
:
url
(http://lorempixel.com/
1600
/
900
);

这里的URL 即请求图片的URL 

百度了一下网上有很多获取一张背景图片的URL接口(免费)

替换 URL 即可获取不同服务商提供的精美图片

下面列举一些获取随机图片的API接口

http://lorempixel.com/1600/900

https://unsplash.it/1600/900?random(国内加载略慢)

(必应返回JSON数据,具体百度)

等等。。。。

【完】

本着共享精神路人决定把本站的二次美化的css样式共享出来(PS:虽拿不出手,但完全免费,不损害大家的利益)

 

路人使用的默认模板是 ThinkInside

将摸版设置好后

在【页面定制CSS代码】中添加以下代码

/*去掉广告*/#site_nav_under {    display: none;}.c_ad_block, .ad_text_commentbox {    display: none;    margin: 0;    padding: 0;}#ad_under_google {    height: 0;    overflow: hidden;}#ad_under_google a {    display: none;}#ad_t2{ display: none;    margin: 0;    padding: 0;}/*美化推荐按钮*/#div_digg { position: fixed;bottom: 20px;    right: 10px;font-size: 0;z-index: 100;width:50px }.buryit{display:none}#green_channel { position: fixed;bottom: 30px;right: 100px;z-index: 100 }/*美化头部*/#header{height:60px;line-height:60px;font-size:18px;opacity:0.5;}#main{margin-top:30px;}#blogTitle h1,#blogTitle h2{line-height:50px;}#blogTitle h1 a {    font-size:30px;}#blogTitle h2 { color:#F5F5F5;font-size:15px;}.menu{margin-top:15px;}#blog_stats{line-height:50px;color:#ffffff;font-size:14px;}/*全局样式*/html,body{font-family: 'Microsoft JhengHei', Microsoft YaHei , sans-serif;}/*文章内容页*/.post {padding-bottom: 30px;}ul li {    list-style: none;line-height:25px;}.commentbox_main{margin-right:20px;}#tbCommentBody{width:100%;height:120px;}.commentbox_title_left{display:none;}.commentbox_title{width:100%}.commentbox_title_right{float:right;}#sideBar{border-radius:1px;border:0px;background:#FAFCFD;}#topics, .post{border-radius:1px;border:0px;background:#FAFCFD;}.dayTitle{border-bottom-width: 0px;}.dayTitle a{display:none;}.day{border:1px solid #f1f1f1;border-radius:3px;padding:5px;margin-bottom:6px;background:#FFFFFF;}.day:hover{    box-shadow: 4px 0px 6px #38AFF3;}.entrylistItem{border:1px solid #f1f1f1;border-radius:3px;padding:5px;margin-bottom:6px;background:#FFFFFF;}.entrylistItem:hover { box-shadow: 2px 0px 6px #000;}/*http://lorempixel.com/1600/900/*//*https://unsplash.it/1600/900?random*/body { background-color: #efefef; background-image: url(http://lorempixel.com/1600/900); background-repeat: no-repeat; background-attachment: fixed; background-position: center 0; background-size: cover; }#sideBarMain{padding:3px;}.feedbackItem,.commentform {background:#ffffff;padding:5px 10px;;}/*底部版权*/#footer{    margin: 30px 20px;    font-size: 12px;    text-align: center;    color: #999;    border-color:#f1f1f1;    padding-top:20px;}/*button input 美化*/.input_my_zzk{border-radius:3px;border: 1px solid #000000;width:120px;height:26px;}input.btn_my_zzk {    height: 30px;   padding:5px  10px;    vertical-align: none;border-radius:3px;border:1px solid;}.comment_btn{  height: 38px;border-radius:3px;border:1px solid;}

 点击保存,返回首页查看效果。【新手教程,写的不好。愿谅解】

转载于:https://www.cnblogs.com/leoking01/p/7159229.html

你可能感兴趣的文章
T-SQL with关键字 with as 递归循环表
查看>>
POJ2184 Cow Exhibition(DP:变种01背包)
查看>>
Only the original thread that created a view hierarchy can touch its views.
查看>>
C# 中的 ConfigurationManager类引用方法
查看>>
Leetcode c语言-Longest Substring Without Repeating Characters
查看>>
正则表达式应用:实现一个简单的计算器
查看>>
py文件的运行
查看>>
eclipse工程 'cocostudio/CocoStudio.h' file not found
查看>>
Google Chrome 总提示flash插件过期,用命令行模式解决
查看>>
REST
查看>>
js 深复制一个对象
查看>>
java例程练习(一维数组)
查看>>
我看的书籍
查看>>
pb 动态改变DW的WHERE子句
查看>>
ios 贝塞尔动画
查看>>
Mac 修改用户名
查看>>
Primes on Interval
查看>>
springmvc国际化
查看>>
利用bootstrap插件设置时间
查看>>
zend guard6的使用
查看>>