让你的博客不再单调 --博客园设置随机背景图片教程

mac2022-06-30 25

按惯例先上一张展示图片

要实现自定义随机图片即在后台【页面定制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代码不难看出

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

这里的URL 即请求图片的URL

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

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

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

http://lorempixel.com/1600/900https://unsplash.it/1600/900?random（国内加载略慢）

https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture【返回必应图片】

https://uploadbeta.com/api/pictures/random/?key=推女郎【随机美女图片】

http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1（必应返回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; }

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

【-好吧我又回来了-】

这次把博客样式2.0放出来，演示效果和本站一模一样

/*去掉不要的*/ #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{ background:#340000; height:60px; line-height:60px; font-size:18px; opacity:0.7; } #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; border-top-left-radius:20px; border-top-right-radius:20px; } #topics, .post{ border-radius:1px; border:0px; background:#FAFCFD; } #topics,.post{ border-top-left-radius:2px; border-top-right-radius:160px; } .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(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 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/zhibu/p/7158807.html

相关资源：JAVA上百实例源码以及开源项目

最新回复(0)