CSS技巧-备用颜色

今天我们要讨论的是网页中字体颜色的问题,比如：

     当网页的背景颜色太接近或完全是文本的颜色时就会发生这种问题

.header {
  background-color: white;
  color: white;
}

 emmm，实际开发中当然没有这种需求的

但是

默认的background-color 是transparent的，所以没有设置任何背景元素的背景可能是白色的。

当然，如果有背景图片的话，就不用担心看不到字体的情况

header {
  background-image: url(plants.jpg);
  color: white;
}

打开浏览器按下F12进入调试模式，选择NetWork切换到3G网络

这样的用户体验显然不是非常好，于是可以这样来设置,增加背景颜色

header {
  background-color: black;
  background-image: url(plants.jpg);
  color: white;
}

黑色背景颜色将确保白色文本在图像加载时可见，如果觉得黑色不好看，我们可以使用图像中使用的颜色。

看上去好多了~