按惯例先上一张展示图片
要实现自定义随机图片即在后台【页面定制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;}
点击保存,返回首页查看效果。【新手教程,写的不好。愿谅解】