写在前面
老规矩，主张PyQt5 写个锤子代码，ui 和逻辑代码不分开的统统是流氓，谢谢，下面开始懒人之旅。
便捷导航

一、QT Designer 添加资源

  1.1  创建qrc载入图片

  1.2 qss引用图片

  1.3 查看当前 qrc 文件

二、正式使用，qrc转py

  2.1 使用pyrcc5 转换

  2.1 在designer生成的 ui文件中引用
一、QT Designer 添加资源
QT Designer 是个啥，还没用过的可以翻我的 《PyQt5 写个锤子代码》， 这里就不多赘述了。
1.1  创建qrc载入图片

通常在右下角存在一个资源浏览器工具（没找到的在左上角 View 打开），点击 Edit Resources，编辑资源文件。




新建一个资源文件，路径随意，以 .qrc 为文件后缀。


新增prefix/path， 添加文件，prefix/path 为前缀，具体体现在引用环节，也可用作分类。添加完毕后在资源浏览器中查看。



出现下图提示为qrc文件与图片不在同一目录，点击copy或把二者放在一块。



1.2 qss引用图片

qss即 .qss 文件，其作用与 css 一致，可以使用部分 css2.0 以下语法。一般qss作为一个独立文件存放，这里直接在 Designer 中添加。


点击按钮控件，在属性栏中找到 stylesheet


Add Resources，添加资源。有三种便捷的添加方式，

background：平铺，照片多大就显示多大，替换范围含边框；

border-image：适应按钮大小，替换范围含边框；

image：与border-image相似，但替换范围不含边框，保持默认样式。





1.3 查看当前 qrc 文件
<RCC>
  <qresource prefix="test1">
    <file>微信图片_20200731153849.png</file>
  </qresource>
  <qresource prefix="test2"/>
  <qresource prefix="test3"/>
</RCC>

.qrc 文件是一个标记性文本，可以手动编辑，但不推荐。
二、正式使用，qrc转py
一般的qss引用图片会出现无法显示的情况，引用不成功大致是路径无法识别等等乱七八糟的因素，不是欧皇，就用qrc来解决。
2.1 使用pyrcc5 转换
pyrcc5 来自 pip install pyqt5-tools 。
在命令提示符调用，

theqrc.py：即将生成的py文件

theqrc.qrc：上述新建的qrc
$ pyrcc5 -o theqrc.py theqrc.qrc

生成了形如下图的 py 文件，它的实质便是将资源图片转存为字节流，因为代码冗长，截取部分作为参考。


2.1 在designer生成的 ui文件中引用
你仅需要关注的是这两个红框内容。
使用 qt designer 生成的ui代码会在最下方来引入一个默认的写法，将此处改为刚刚生成的py文件即可。


写到这里就告一段落了，有问题的在下方评论留言讨论。
那么，恭喜你又学完了一课，我是庸了个白，你的点赞将是我更新的最大动力。

此方法适用于360安全浏览器，其他浏览器请移步：给浏览器设置一个图片背景/主题
先上一张效果图：





实现步骤：

1.点击管理–>点击添加–>右上角搜索stylebot–>安装



2.安装完成后可以在地址栏旁边看到这样一个图标，点击这个图标，选择点击Options



点击左边额style，再点击Edit the Global Stylesheet



3.将以下代码复制粘贴到那个文本框里面，保存

body {

background-image: url(**********************.jpg);

background-attachment: fixed;

background-size: cover;

}


4.代码中的url是你所用的图片的网络地址，怎么设置自己的图片呢？

我方法：在CSDN上写一篇文章，将我要用的图片放到这篇文章里面，再将图片的url（即网络地址）复制过来就可以了。（之前用的知乎，但是知乎会把图片压缩，变得模糊，而CSDN不会。另外，上传的照片尽量小一点，这样每次打开新网页的时候加载更快）

如图：

更新啦
此方法适用于：谷歌浏览器（chrome），火狐浏览器（firefox），360极速浏览器，QQ浏览器

360安全浏览器请移步：给360安全浏览器添加一个图片背景/主题
先上两张效果图：






实现步骤：

1.先在你的浏览器的插件商城里面搜索安装styluh插件（谷歌浏览器需要科学上网）

进入插件商城方法：

谷歌浏览器：菜单–>点击更多工具–>点击扩展程序

火狐浏览器：菜单–>附加组件

360极速浏览器：菜单–>工具–>管理扩展

QQ浏览器：菜单–>应用中心

后续步骤基本相同



如图选择第一个，安装到你的浏览器
2.安装完成后，如图，点击stylus的图标再点击管理已安装的


然后我们就看到了这样的一个画面：

再点击新建样式


3.将以下代码复制粘贴到那个文本框里面，并给这个样式命名，保存

body {

background-image: url(**********************.jpg);

background-attachment: fixed;

background-size: cover;

}


4.代码中的url是你所用的图片的网络地址，怎么设置自己的图片呢？

我方法：在CSDN上写一篇文章，将我要用的图片放到这篇文章里面，再将图片的url（即网络地址）复制过来就可以了。（之前用的知乎，但是知乎会把图片压缩，变得模糊，而CSDN不会。另外，上传的照片尽量小一点，这样每次打开新网页的时候加载更快）

如图：


粘贴到url的括号中。然后，你的浏览器就有背景了。

但是部分图片如果不加以处理，可能严重影响阅读，如图：



因此需要简单的处理一下

处理教程教程链接：使用powerpoint简单的处理图片(用作浏览器背景)

文章目录
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;^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;
    }


效果图：

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