CSS 基础：使用备用颜色

在网页设计中，您非常需要避免的是无法阅读的文本。当元素的背景颜色与文本颜色过于接近或完全相同，就会发生这种情况。例如

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

这可能会导致文本存在但不可见。

当然，您永远不会故意这样做！问题在于它可能会偷偷地发生。一方面，默认的background-color是transparent，因此在没有设置任何背景的情况下，元素的背景可能为白色。

更常见的情况是，您使用的是background-image，它使背景变成不同的颜色，并且您在上面设置了白色文本。

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

在理想情况下，这一切都很好

但让我们看看在网站通过非常常见的“慢速3G”互联网连接加载时，它是什么样子

我们的访客没有理由需要等待才能发现这个星期天等待他们的难以置信的优惠！幸运的是，只需一点CSS就可以解决这个问题。

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

黑色背景颜色将确保在图像加载期间（或者根本不加载！）白色文本可见。稍微花哨一点，我们可以使用图像中使用的颜色。我喜欢一个名为Frank DeLoupe的小应用程序，它可以帮助我从屏幕上的任何位置提取颜色。然后，我将使用该颜色作为备用颜色，使用背景的简写语法

header {
  background: #334C23 url(plants.jpg);
  color: white;
}

好多了。

这种事情需要花费很少的精力，提高了设计弹性和用户体验，并且我认为您会发现，随着您编写更多CSS，它会成为您CSS肌肉记忆的一部分。

另一个相关的主题，因为我们正在处理照片，就是“渐进式JPG”的概念。Photoshop 具有以这种格式保存JPG的功能。这会改变它在网络上传输时的显示方式。这是一个对比视频

这可能是一种更理想的加载体验，但不能替代备用颜色。

更上一层楼！

图像是一个网站中最占用资源的部分之一，它们的加载技术是 Web 性能中的一个重要主题。以下是一些与之相关的其他需要考虑的事项

• 使用CSS 渐变，我们可以在图像加载之前复制其模糊版本。甚至可以自动化它。
• 查看模糊增强技术
• 查看此巧妙技巧，了解如何使用 SVG 多边形作为备用图像。