解决背景与文字颜色冲突问题

解决因背景图颜色，导致文字看不清晰的问题

前言

刚刚创建此博客，被随机背景图和散文诗集吸引。但常常因为背景图颜色过浅，导致白色的文字看不清晰。

方法

本来想把所有的背景图都换成黑色的。但当我下载了 1500 多张图，准备从中挑出所有的黑色背景图时，公司的美工丢给我一行代码彻底解决了我的问题。

text-shadow:1px 1px 1px #000;

仅仅是给文字加了深色阴影。

Annie 主题

有了解决方法，开始修改 Annie 主题
在 Annie/source/css 下，有个 Annie.css 文件

第 208 行
header .h-header {
   text-shadow:1px 1px 1px #000;   /*MiracleQi修改*/
    position: relative;
    height: 10%;
    padding: 1em;
}

第 262 行
header .motto {
   text-shadow:1px 1px 1px #000;   /*MiracleQi修改*/
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.5em;
    font-weight: 100;
    line-height: 1.5em;
    color: white;
    text-align: center;
    width: 60%;
    margin: 4em auto;
}

第 303 行
header .h-footer ul li a {
   text-shadow:1px 1px 1px #000;   /*MiracleQi修改*/
    display: inline-block;
    cursor: pointer;
    margin: 0 1em;
    border: 0;
    font-size: 1.2em;
    color: #fff;
}

将这三处白色的文字，加上阴影即可。

前后对比

修改前：

修改后：

完美！