WordPress 中 CSS 的魔力：掌握 Cover 区块以提升可读性

Source: Dev.to

介绍

这个 SushiHost 教程是任何使用 WordPress 区块编辑器（Gutenberg）并希望其封面图片（Cover Block）看起来专业且更重要的是易读的必备指南。它解决的核心问题是如何在复杂的背景图像上确保文字突出，而不使用基础的解决方案。

高级技术

使用 background-image 的层叠叠加

使用多层背景图像（图像本身和半透明渐变），无需伪元素。这是最简洁且兼容性最好的技术。

伪元素 (::before)

为了实现最大控制，示例展示了如何使用 ::before 创建一个浮动的叠加层，允许更复杂的效果，并可通过 z-index 将文字提升，使其始终可见。

背景混合 (background-blend-mode)

介绍实验性属性 background-blend-mode，用于在颜色与图像之间创建混合视觉效果，增加深度和暗化效果。

可访问性

本教程强调可访问性（WCAG），提醒需要使用 text-shadow 或在文字后面添加半透明阅读面板，以确保足够的对比度，尤其在移动设备上。

结论

这是一本为寻求对 WordPress 封面实现像素级完美控制的开发者和设计师准备的优秀手册。