问题描述

在配置好Butterfly的侧边栏主题后，在有些情况下，可以很明显的感受到侧边栏的头像显示不清晰。

而位于本地的头像文件为700×700像素的高清图，肯定不是图片文件的清晰度问题。

当我们把鼠标移动到头像上时，可以看到头像旋转动画，而在头像旋转的一瞬间，我们可以感知到头像突然变清晰，随着头像旋转动画结束，头像又变回模糊状态。

问题分析

在网页上，图片的大小和缩放是通过CSS样式控制的。如果图片出现模糊的情况，那应该是浏览器的缩放算法和图片处理软件的不同导致的差异。

为了定位问题，我们首先在本地构建网站。

1	hexo clean;hexo g;hexo s

构建成功后，我们在本地的/public/css目录下定位到网站的CSS文件：index.css。

打开index.css，搜索avatar-img定位到头像相关的配置。

在这里，我们就可以发现与头像相关的所有三个选择器，前两个控制头像的基本属性，第三个控制头像旋转。

而我们可以发现，在头像文件为700×700px的前提下，默认头像实例将所有的头像大小锁定在了110×110px，浏览器在处理图片缩放的时候，默认算法会对图片进行有损压缩，从而使头像显示模糊。

解决方法

我们可以利用CSS属性 image-rendering 用于设置图像缩放算法。

image-rendering属性的语法如下：

专有属性值

1
2
3

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

全局属性值

1
2
3

image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

属性值	说明
`auto`	自 Gecko 1.9 （Firefox 3.0）起，Gecko 使用双线性（bilinear）算法进行重新采样（高质量）。
`crisp-edges`	必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。
`pixelated`	放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 `auto` 相同。

在通常情况下，auto是浏览器默认的缩放算法。于是我们要想修改算法并且让图像缩小的时候能保证一定清晰度，需要使用crisp-edges算法。

我们需要使用在首行缩进配置时使用的，利用inject插入相关CSS代码。

在source目录下创建名为css的新文件夹（如果没有的话）
在css文件夹下创建CSS文件，例如avatar.css

打开并编辑avatar.css文件，添加如下代码并保存：

.avatar-img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

注：大多数浏览器已经不支持image-rendering: crisp-edges;这种写法了，需要使用如上兼容性写法。

修改主题配置文件_config.butterfly.yml中的inject相关配置（具体过程见Hexo博客设置首行缩进方法），保存后执行本地预览查看效果：

其他优化

一、修改头像形状

我们可以通过修改头像的border-radius属性来控制圆角形状。

border-radius属性是一个简写属性，用于设置四个 border-*-radius 属性。

该属性允许我们为元素添加圆角边框，属性定义如下：

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderRadius=“5px”

属性用法如下，按此顺序设置每个半径的四个值：

1	border-radius: 1-4 length\|% / 1-4 length\|%;

如果省略 bottom-left，则与 top-right 相同
如果省略 bottom-right，则与 top-left 相同
如果省略 top-right，则与 top-left 相同

值	描述
length	定义圆角的形状。
%	以百分比定义圆角的形状。

例：

代码border-radius: 2em 1em 4em / 0.5em 3em;等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

在我们的博客中，我们可以修改原本的设置border-radius: 70px为border-radius: 10px：

最后效果为：

二、添加头像阴影

我们可以通过添加头像的box-shadow属性来为头像实现简单的阴影效果，box-shadow属性可以向框添加一个或多个阴影。

属性定义如下：

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxShadow=“10px 10px 5px #888888”

属性用法如下：

1	box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

在我们的博客中，我们可以增加一条属性配置：box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);：

最后效果为：

三、去掉头像旋转特效

在Butterfly主题默认配置中，我们只能去掉头像一直旋转的特效，无法去掉鼠标移动到头像上的旋转特效。

在CSS中，图片的旋转特效是由transform属性控制的，我们可以用上文方法轻松定位到控制头像旋转的相关实例，我们只需要利用inject替换相关代码即可。

将原本配置中的rotate(360deg)全部替换为unset：

.avatar-img img:hover {
    -webkit-transform: unset;
    -moz-transform: unset;
    -o-transform: unset;
    -ms-transform: unset;
    transform: unset;
}