hexo+yilia添加背景图片
文章目录
- 1.左侧边栏
- 取消上半部分的背景颜色
- 添加背景图片
- 2.右边的文章
- 调整背景颜色为透明
- 取消右侧栏背景颜色
- 3.添加背景图片
- 效果:
- 4.微调
- 4.1调整评论区背景
- 4.2调整归档背景
- 4.3主页的文章块的日期取消超链接样式
- 4.4手机端头部背景颜色
- 4.5鼠标图片
- 4.6行内代码、引用块的背景颜色
添加背景图片,效果图:
注:因为有博客不是修改时写的,部分代码没有进行备份,所以有些只能从git中获取代码,有些可能有点乱。
同时因为每个人选的背景图片可能有所不同,主体颜色可能差异很大,需要调整的颜色可能比较多,这篇博客仅供参考,请自行选择是否替换背景。
1.左侧边栏
取消上半部分的背景颜色
:themes/yilia/layout/_partial/left-col.ejs
,如下:这是掉上面的一行代码,使用下面的
<!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"> -->
<!-- 左侧边栏(上半部分)不设置背景颜色 -->
<div class="overlay" >
添加背景图片
H:\Hexo\themes\yilia\source\main.0cf68a.css
,注释掉原有的背景颜色,添加照片:
.left-col {/* background:#fff; */background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),url('http://bucket836.oss-cn-shenzhen.aliyuncs.com/wallpaper/381535373.jpeg') no-repeat 0% 20%/ cover;width:300px;position:fixed;opacity:1;transition:all .3s ease-in;-ms-transition: all .3s ease-in;height:100%;z-index:999
}
根据背景图片修改字体颜色(这步可以自定义),我是将color:#696969
改成color:#673ab7
:git
.left-col #header a {- color:#696969
+ color:#673ab7^M}.left-col #header a:hover {- color:#b0a0aa
+ color: #03A9F4^M}.left-col #header .header-subtitle {text-align:center;
- color:#999;
+ color:#673ab7;font-size:18px;
2.右边的文章
调整背景颜色为透明
主要是将白色背景变成透明的,background:#fff;
–>background: rgba(255,255,255,.5);
调整后Git
.article {- margin:30px;
- position:relative;
- border:1px solid #ddd;
- border-top:1px solid #fff;
- border-bottom:1px solid #fff;
- background:#fff;
- /* background: rgba(255,255,255,.5); */
- transition:all .2s ease-in
+ margin: 30px;^M
+ border: 1px solid #ddd;^M
+ border-top: 1px solid #fff;^M
+ border-bottom: 1px solid #fff;^M
+ background: rgba(255,255,255,.5);^M
+ transition: all .2s ease-in^M}
即:
.article {margin: 30px;border: 1px solid #ddd;border-top: 1px solid #fff;border-bottom: 1px solid #fff;background: rgba(255,255,255,.5);transition: all .2s ease-in
}
取消右侧栏背景颜色
(2019-11-18补充)该背景可能会遮住全局背景,因此应该取消掉,如果已取消可忽略。
3.添加背景图片
将白色background-color:#fff;
替换为照片:
body {margin:0;font-size:14px;font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;line-height:1.5;color:#333;/* background-color:#fff; */min-height:100%;background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/00/ChMkJlbKw6KIXhXnAA4L-_oxRzUAALG6QBUSg8ADgwT181.jpg') no-repeat 0% 0%/ cover;
}/* 手机端换用一张背景图片,可以不使用 */
@media screen and (max-width:800px) {body {background: url('https://oss.yansheng.xyz/your-name-phone2ys.jpg') no-repeat fixed top;}
效果:
4.微调
4.1调整评论区背景
原来为白色,现在改为透明。
先将之前定义在H:\Hexo\themes\yilia\layout\_partial\article.ejs
的样式统一放到H:\Hexo\themes\yilia\source\main.0cf68a.css
,如下git diff
<!-- 《valine评论 --><% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %><section id="comments" class="comments">
- <style>
- .comments{margin:30px;padding:10px;background:#fff}
- @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
- </style>
+<%- partial('post/valine', {key: post.slug,title: post.title,
在最后面添加:
/* 《评论框 */
.comments {margin:30px;padding:10px;/* background:#fff */background: rgba(255,255,255,.5);
}
@media screen and (max-width:800px) {.comments {margin:auto;padding:10px;/* background:#fff */background: rgba(255,255,255,.5);}
}/* valine的背景颜色 */
#vcomment{/* background:#fff */background: rgba(255,255,255,.9);
}/* 设置valine占位符的颜色 */
#vcomment :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #979292;
}
#vcomment ::-moz-placeholder { /* Mozilla Firefox 19+ */color: #979292;
}
#vcomment input:-ms-input-placeholder, #vcomment textarea:-ms-input-placeholder {color: #979292;
}
#vcomment input::-webkit-input-placeholder,#vcomment textarea::-webkit-input-placeholder {color: #979292;
}
/* 评论框》 */
效果:
参考:html中怎么设定input的占位符字体颜色
4.2调整归档背景
之前调整的文章背景透明好像没有影响到这个:
进行调整:
.archives-wrap {position:relative;margin:0 30px;padding-right:60px;border-bottom:1px solid #eee;/* background:#fff */background: rgba(255,255,255,.5);
}
调整日期颜色
.article-meta time {/* color:#aaa */color: #2f2d2a;
}
日期时间大小
.archive-article-inner .article-meta .archive-article-date {cursor:default;font-size:15px;margin-bottom:5px;margin-top:-10px;margin-right:0
}
微调归档页面的标题样式:
/* 丢弃之前的 */
.archives .archive-article-title {font-size: 16px;color: #333;transition: color .3s
}
/* 修改: */
/* 分类页面的标题 */
.archives .archive-article-title {font-size:20px;/* color:#333; */transition:color .3s
}
.archives .archive-article-title:hover {/* color:#657b83 */
}
因为将右边栏的超链接都统一进行了设置,如果不需要特效,可以通过下面的代码取消超链接的下划线样式:
a.share-outer:hover::after {transform: scaleX(0);
}
4.3主页的文章块的日期取消超链接样式
日期和文章统计数样式
原:
.archive-article-date {color:#999;margin-right:7.6923%;float:right
}
修改后:
/* 日期栏(如果是文章还包含卜算子的页面访问量) */
.archive-article-date {/* color:#0087ca; */color:#4b4949;margin-right:7.6923%;float:right
}
/* 日期 */
.archive-article-date time{color:#4b4949;
}
/* 日期同一行的文章阅读数量 */
.archive-article-date[id=busuanzi_container_page_pv] {color:#4b4949;
}
主页的“展开全文”按钮样式:受全局超链接样式影响,悬浮后,会变成红色。处理:提前加一个悬浮,掩盖全局的:
/* 防止鼠标悬浮时,变色,因为会被全局的超链接样式影响 */.article-more-link a:hover{color:#fff;
}
前一页后一页:去掉悬浮的样式,可以直接注释掉:
#article-nav .article-nav-link-wrap:hover .article-nav-title, #article-nav .article-nav-link-wrap:hover i {/* color:#4d4d4d */
}
标签按钮:受全局超链接样式影响,悬浮后,会变成红色。处理:提前加一个悬浮,掩盖全局的:
.tagcloud a:hover {+ color:#fff;^Mopacity:.8}
4.4手机端头部背景颜色
H:\Hexo\themes\yilia\layout\_partial\mobile-nav.ejs
取消内嵌样式,在全局css中进行设置:
<!-- <div class="overlay js-overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>--><div class="overlay js-overlay"></div>
H:\Hexo\themes\yilia\source\main.0cf68a.css
设置成渐变:
#mobile-nav .overlay {height:110px;position:absolute;width:100%;z-index:2;/* 渐变:浅绿色变淡蓝色 */background-image: linear-gradient(#8fecc5,#0badf7);/* 浏览器不支持渐变时显示默认颜色 */background-color: #4d4d4d;}
效果图:
4.5鼠标图片
去网上找一种鼠标指针的图片,用图片替换默认的鼠标样式:cursor:url('url'), default;
,default表示:如果图片不起效,就是用默认的。
body {margin:0;font-size:14px;font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;line-height:1.5;color:#333;/* background-color:#fff; */min-height:100%;background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://oss.yansheng.xyz/wallpaper/qinshimingyue.jpg') no-repeat 0% 0%/ cover;cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
}/* 因为超链接默认情况下是:cursor: pointer; 显示为手,这里进行设置 */
a {cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
}
4.6行内代码、引用块的背景颜色
.article-entry li code, .article-entry p code {color: #c7254e;/* background-color: #f9f2f4; */background-color: rgba(249, 242, 244, .7);border-radius: 2px;padding:2px 4px;margin:0 3px;/* background:#ddd; *//* border:2px solid #ccc; */font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;word-wrap:break-word;/* font-size:14px */
}
.article-entry blockquote {background:#ddd;border-left:5px solid #ccc;padding:15px 20px;margin-top:10px;border-left:5px solid #657b83;/* background:#f6f6f6; */background: rgba(246, 246, 246, .7);/* 如果超长,自动截断 */word-wrap:break-word;word-break:break-all;
}
文章首发于:hexo+yilia添加背景图片
hexo+yilia添加背景图片相关推荐
- jsp中给div加背景_html中给元素添加背景图片或者gif动图
添加背景图片有四种常用的方式,分别是: repeat 完全平铺 repeat-x 横向平铺 repeat-y 纵向平铺 no-repeat 不平铺 使用示例: Document ...
- hexo+yilia添加相册视屏功能
文章目录 一.增加相册功能 1. 原理 2.修改代码 2.1 新建博客的photos页面 2.2 新建本地图片库 2.3 修改`tool.py`中的路径 2.4 每次上传照片都需要运行python脚本 ...
- java 添加图片背景_java添加背景图片
总结:我们通常实现添加背景图片很容易,但是再添加按钮组件就会覆盖图片.原因是: 有先后啊.setlayout();与布局有很大关系 请调试代码的时候,仔细揣摩.我晕了 还可以添加文本框,密码框 fra ...
- VC中为对话框添加背景图片
From: http://blog.ezcn8.com/2011/06/11/vc%E4%B8%AD%E4%B8%BA%E5%AF%B9%E8%AF%9D%E6%A1%86%E6%B7%BB%E5%8 ...
- .net的label的背景如何设置成为透明_css如何设置背景图片?background属性添加背景图片...
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
- java添加背景图片_Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
- winformbutton边框怎么改_C#(winform)为button添加背景图片,并去掉各种边框
1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = "" ;来设置图片 而不应该使用 Button.Image = "" ...
- MFC中 给基于CFormView的单文档添加背景图片
关于基于CFormView的单文档应用程序,添加一个图片背景的方法之一如下: 下面是利用LoadImage实现.(先在程序目录中添加背景图片back.bmp) 1.在view类中添加类成员变量:(为C ...
- 计算机wold标题文字加背景,office word文档添加背景图片以及背景颜色来美化枯燥乏味的文字...
在浏览网页的时候,遇到各式各样的好看图片是常用的事,现在的需求就是如何将这些看似比较不错的图片设置为Word的文档背景.设置背景的目的是为了美化文字的同时还可以为文档增姿添彩.看到这里大家是不是有点迫 ...
- android 视频做背景图片,视频后面怎么加背景图片?安卓手机给视频添加背景图片的方法...
狸窝是帮助用户解决问题 提供教程解决方案 在这个过程中有使用我们自己开发的软件 也有网上找的工具 只要帮助用户解决问题就好!同意则往下继续了解学习 ... 注意此教程方案是:『安卓手机端教程方案』.很 ...
最新文章
- python线性整数规划求解_实例详解:用Python解决整数规划问题!
- (写给像我一样刚离开校园进入公司的小菜鸟)在领域架构下,如何实现简单的展示页面以及增删改查(第二步)...
- 为什么维护工作让数据中心工作人员夜不能寐?
- 张秋余---经典语录
- 禁止 VMware Fusion 自动调整 Windows 分辨率
- 【Linux】【MySQL】CentOS7安装最新版MySQL8.0.13(最新版MySQL从安装到运行)
- 【报告分享】2021全球10大金融科技趋势-蚂蚁集团.pdf(附下载链接)
- 亲密关系沟通-【独特性】尊重与探索他人
- Maven修改默认JDK
- [计算机视觉] 边缘检测Canny算法原理总结 以及 matlab代码实现
- Ubuntu 编译ijkplayer 支持几乎所有格式(MP4,mov,mkv,avi,wmv,m4v,mpg,webm,ogv,3g2.flv,f4v,swf)和https
- 海鸣威《离开为了更好的回来》 MV首播感心动耳
- springboot配置两个parent的方法
- 西门子S7-1200PLC远程调试方法
- 西行漫记(15):重构到模式
- 没上网也能使用QQ截图工具
- 胡忠想|微博微服务架构的Service Mesh实践之路
- (转载潘老师的博文)潘爱民:我只是个技术爱好者
- 站长必备WordPressCMS采集插件实现稳定收录
- Paste与Solder层的意思
热门文章
- matlab画站点降雨分布,matlab 怎样做整个中国各个气象站点上的温度变化趋势
- 批量替换Excel表格中非空的单元格的内容
- 树莓派简单摄像头录像并保存视频文件
- tas5424_TAS5424
- linux隔离磁盘坏道,Repartion Bad Drive(硬盘坏道隔离工具
- 51单片机红外遥控继电器电路部分设计
- Python-re中search()函数的用法-----查找ip(超详细)
- POJ-3376 Finding Palindromes
- 专利分析:数字人民币的“双离线”支付问题
- Axure制作倒计时