# Hexo-Next-Gemini主题透明化以及背景图片的更改和获取

<!--more-->

## 背景图片的更改
### 自动变化背景图片或者固定背景图
找到路径下的custom.styl文件：
hexo/themes/next/source/css/_custom/
在该文件中加入如下代码(其实next中有这个代码，只是开发团队默认注释掉了)

**自动背景使用的是unsplash.com提供的API链接，感谢**

```css
@media screen and (min-width:1200px) {
    body {
        background-image:url(https://source.unsplash.com/random/1600x900);      //这一行的括号里填背景图片的路径，将图片重命名为background.jpg放在\themes\next\source\images下
        // background-image:url(/images/background.jpg);      //这一行的括号里填背景图片的路径，将图片重命名为background.jpg放在\themes\next\source\images下
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 50%;
        background-size:100% 100%;
    }

    #footer a {
        coler: #eee;
    }
}
```

### 代码注解
- background:url为图片路径，也可以直接使用链接
- background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
- background-attachment：背景是否随着网页上下滚动而滚动，fixed为固定
- background-position：就是调整图片的位置
- background-size：图片展示大小，这里设置100% 100%的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示。(**让背景图铺满整个页面，~~简直就是强迫症的解药啊!!!~~**)
- 若使用固定图片，那么要将**图片重命名为background.jpg**放在\themes\next\source\images下(~~说实话，小编一开始不知道要重命名成background，写文章的时候才发现，写文章还是有用呀~~)

### 注意
如果很在意网站打开速度的话，不建议使用特别大的背景图片或者是自动变化的背景，因为网站会由于图片太大会拖慢整个网站的载入速度!!

## Gemini主题透明化
### 预备知识
Q:为什么要修改Pisces中的文件？

A:因为Gemini文件导入了Pisces文件夹中的4个文件

### 内容板块透明
1. 博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .content-wrap 标签下 background: white修改为：
`background: rgba(255,255,255,0.7); //0.7是透明度`
2. 博客根目录 themes\next\source\css\_schemes\Gemini\index.styl文件 .post-block 标签下的 background: white修改为：
`background: rgba(255,255,255,0.7); //0.7是透明度`

### 分页(主页最下面的那一小块)
博客根目录 themes\next\source\css\_schemes\Gemini\index.styl 文件 .pagination 标签下的 background: white修改为：
`background: rgba(255,255,255,0.7); //0.7是透明度`

### 菜单栏背景
1. 博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .header-inner 标签下 background: white修改为：
`background: rgba(255,255,255,0.7); //0.7是透明度`
2. 博客根目录 themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件  .sidebar 标签下 增加一行:
`opacity: 0.7; // 0.7透明度自己选择`

### 站点概况背景
1. 博客根目录 themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为：
`background: rgba(255,255,255,0.7); //0.7是透明度`
2. 然后修改博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .sidebar 标签下 background: $body-bg-color修改为：
`background: rgba(255,255,255,0.7); //0.7是透明度`

### 评论区背景
1. 博客根目录 themes\next\source\css\_schemes\Gemini\index.styl文件 .comments 标签下的 background: white修改为：
`background: rgba(255,255,255,0.7); //0.7是透明度`

## 效果图
<a href="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE1.png" data-fancybox="images" target="_blank" rel="noopener noreferrer">
    <img src="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE1.png" width="50%" height="50%" target="_blank"/>
</a>
<a href="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE.png" data-fancybox="images" target="_blank" rel="noopener noreferrer">
    <img src="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE.png" width="50%" height="50%" target="_blank"/>
</a>
<a href="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE2.png" data-fancybox="images" target="_blank" rel="noopener noreferrer">
    <img src="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE2.png" width="50%" height="50%" target="_blank" />
</a>

## 看到精美背景想要保存？
### 比如我看到了这张背景和我的3D雪花特效的叠加效果简直惊艳
<a href="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE3%E7%95%99%E5%BD%B1%E4%BD%86%E6%9A%82%E6%9C%AA%E5%B1%95%E7%A4%BA.png" data-fancybox="images" target="_blank" rel="noopener noreferrer" >
    <img src="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E6%95%88%E6%9E%9C%E5%9B%BE3%E7%95%99%E5%BD%B1%E4%BD%86%E6%9A%82%E6%9C%AA%E5%B1%95%E7%A4%BA.png" width="50%" height="50%" target="_blank" />
</a>

### 好，我教你啊！
1. 按F12进入开发者，**然后移动开发者模块和页面之间的分隔线让页面宽度变大到显示背景图**(因为之前设置中设置了只有达到一定宽度才会显示图片)
2. 在source栏目下找到image.unsplash文件夹下的图id,当然可以立马保存啦(操作详见下图)

<a href="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E5%A6%82%E4%BD%95%E4%BF%9D%E5%AD%98%E6%9C%AC%E7%AB%99%E7%9C%8B%E5%88%B0%E7%9A%84%E7%B2%BE%E7%BE%8E%E7%9A%84random%E7%85%A7%E7%89%87.png" data-fancybox="images" target="_blank" rel="noopener noreferrer" >
    <img src="https://cdn.jsdelivr.net/gh/wolfdan666/BlogPic/hexo%E4%BC%98%E5%8C%96/%E4%B8%BB%E9%A2%98%E9%80%8F%E6%98%8E%E4%BB%A5%E5%8F%8A%E8%83%8C%E6%99%AF%E5%9B%BE/%E5%A6%82%E4%BD%95%E4%BF%9D%E5%AD%98%E6%9C%AC%E7%AB%99%E7%9C%8B%E5%88%B0%E7%9A%84%E7%B2%BE%E7%BE%8E%E7%9A%84random%E7%85%A7%E7%89%87.png" width="50%" height="50%" target="_blank" />
</a>


## 参考链接
[大佬-http://wiki.johnhao.tech](http://wiki.johnhao.tech/%E7%BB%99Hexo%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2-next%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87/)
[大佬-芒果浩明](https://www.jianshu.com/p/30bf702f533c)
[大佬-路人S](https://zhuanlan.zhihu.com/p/30836436)