hexo+yilia添加背景图片

<!-- <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
}

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;
    }

效果：

hexo+yilia添加背景图片

4.微调

4.1调整评论区背景

原来为白色，现在改为透明。

hexo+yilia添加背景图片
先将之前定义在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;
}
/* 评论框》 */

效果：

hexo+yilia添加背景图片

参考：html中怎么设定input的占位符字体颜色

4.2调整归档背景

之前调整的文章背景透明好像没有影响到这个：

hexo+yilia添加背景图片

进行调整：

.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;^M
     opacity:.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;
    }

效果图：

hexo+yilia添加背景图片

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添加背景图片

文章目录

1.左侧边栏

取消上半部分的背景颜色

添加背景图片

2.右边的文章

调整背景颜色为透明

3.添加背景图片

效果：

4.微调

4.1调整评论区背景

4.2调整归档背景

4.3主页的文章块的日期取消超链接样式

4.4手机端头部背景颜色

4.5鼠标图片

4.6行内代码、引用块的背景颜色

钉钉请假怎么上传图片? 钉钉请假添加照片的方法

premiere怎么给视频添加黑幕下降的效果?

BB FlashBack视频图像怎么添加宽度?

利用arctime添加字幕出错了怎么办？

万兴神剪手转场特效如何使用？使用万兴神剪手为视频添加转场特效的方法

Goldwave怎么给音频文件添加回声效果

Chrome浏览器添加自动冻结功能不再播放不重要的Flash内容

如何利用威力酷剪给手机视频添加音乐？

camtasia怎么给视频添加注释

jQuery添加新内容的四个常用方法分析【append，prepend，after，before】

hexo+yilia添加背景图片

文章目录

1.左侧边栏

取消上半部分的背景颜色

添加背景图片

2.右边的文章

调整背景颜色为透明

3.添加背景图片

效果：

4.微调

4.1调整评论区背景

4.2调整归档背景

4.3主页的文章块的日期取消超链接样式

4.4手机端头部背景颜色

4.5鼠标图片

4.6行内代码、引用块的背景颜色

钉钉请假怎么上传图片? 钉钉请假添加照片的方法

premiere怎么给视频添加黑幕下降的效果?

BB FlashBack视频图像怎么添加宽度?

利用arctime添加字幕出错了怎么办？

万兴神剪手转场特效如何使用？使用万兴神剪手为视频添加转场特效的方法

Goldwave怎么给音频文件添加回声效果

Chrome浏览器添加自动冻结功能 不再播放不重要的Flash内容

如何利用威力酷剪给手机视频添加音乐？

camtasia怎么给视频添加注释

jQuery添加新内容的四个常用方法分析【append，prepend，after，before】

Chrome浏览器添加自动冻结功能不再播放不重要的Flash内容