网站建设-创建CSS网格图像库（具有模糊效果和交互媒体查询）

1.  更改标记（一点）

让我们快速浏览一下Rachel代码生成的标记。清理后，它看起来像这样：

我们有一个父母<div>，它拥有<h2>一些<article>元素。当我们使用CSS Grid时，我们首先定义一个网格容器。在这种情况下，我们可以使用父节点<div>，但这将使每个直接子节点- 包括<h2>-a网格项，所以我们需要稍微改变一下。

我们将所有<article>元素包装在另一个元素中<div>（随意使用你觉得最合适的元素），我们会想象地给出一类  grid-container。使用此入门笔作为基础。

2.  响应式CSS网格，三线

只需几条规则，我们就可以将缩略图变成网格：

这里简单的线条是display: grid;（将所有直接的孩子变成网格项并将它们排出）和grid-gap: 1em;（它定义了我们的排水沟）。 

稍微复杂一点来自我们赋予grid-template-columns属性的值  ，它定义了我们的列。您通常可能会看到类似的东西repeat(3, 200px)会给我们三列200px。在这种情况下，我们使用了auto-fill关键字for repeat()，然后使用了一些值。这为我们提供了尽可能多的列，最小值为300px，最大值为1fr，适合网格容器。

• 
  CSS网格布局
  CSS Grid Layout：响应自动填充和minmax（）
  伊恩耶茨

调整浏览器窗口的大小，看看它的行为方式！

您需要添加的最后一个细节：

这将确保图像正确填充其容器（特别需要与Rachel的演示一起使用，因为我们需要覆盖内联宽度和高度属性WordPress输出）。

3.  悬停效果

我们将使用标题作为缩略图的叠加层，在悬停时显示它们。我们还将为悬停的图像提供红色效果，并使其略微模糊，以帮助覆盖文本的可读性。 

覆盖标题

要叠加标题，我们需要定位它，所以我们首先要制作文章position: relative;和标题position: absolute;。我们还会给它一个红色背景并填充可用空间：

好的开始！ 

有一两件事要改进，包括底部的额外空间（标题略大于缩略图）。这可以通过删除line-height图像容器上的任何内容来解决：

标题的风格

一些印刷样式将改善我们的标题的外观，并且三行flexbox魔术将集中为我们对齐：

好多了：

隐藏标题

现在让我们通过删除它的不透明度隐藏标题，这样我们只能在悬停时看到它。我们已经添加到我们的规则之下的更多规则.location-title应该这样做：

在这里，我们还设置了一个transition规则，以便当我们确实将不透明度恢复时，它将逐渐发生（在0.5秒的过程中）。我们现在把它带回来：

大！现在我们的标题再次出现在悬停上：

线条模糊

我们已经创造了一个漂亮的悬停效果，但让我们更进一步，不是吗？我们也为图像添加模糊滤镜。我们首先将模糊滤镜设置为正常状态，以便为我们提供一些过渡。然后我们会为悬停状态模糊2px的事情（根据你的意愿使这个数字变得极端，但我认为2px给了我们一个很棒的视觉效果）：

这是给我们的：

有几点需要注意：

1. 标题已经消失，因为浏览器现在在其顶部呈现模糊图形。
2. 模糊的效果看起来很好，但它也给我们一个模糊的边缘（我们可以做得更好）。

修复隐藏的标题就像添加z-index: 1;到  隐藏标题一样简单.location-title。

修复模糊的边缘更复杂一些。首先，我们缩放图像以使其更大，然后我们overflow: hidden;在图像容器（.location-listing）上设置，以便当较大的图像模糊时，其边缘被有效地裁剪。以下是有问题的两个元素的已完成属性：

该  transform: scale(1.1);规则将我们在所有方向上的图像缩放到1.1（其中1.0将保持完全相同的大小）。这是更简洁的结果：

4.  触摸屏问题

因此，我们有它！一个漂亮的图像网格，每个缩略图上都有模糊的悬停效果。唯一的问题是标题是隐藏在任何不能悬停在图像上的人（大量的平板电脑和智能手机不能模仿悬停在长时间的“按下”），这是不容易访问的。

幸运的是，CSS有一些非常有用的交互媒体查询可以帮助我们（他们也享受相当不错的浏览器支持）。这些查询将检测浏览器的输入机制 - 指针设备质量，悬停能力以及一些其他特殊定义 - 因此我们可以相当准确地确定是否在触摸屏设备上查看我们的缩略图。

以此媒体查询为例（它完全符合您的预期）：

在这些花括号中，我们将我们想要应用的任何样式应用于无法处理的浏览器:hover。让我们这样做 - 我们将声明，对于悬停不可能或至少不方便的设备，缩略图图像将始终模糊，标题将始终可见：

看一看：

注意：如上所述，对此的支持非常合理，但有关交互媒体查询实施的讨论仍在进行中。这个规范很可能会改变或删除部分。

我们完成了！感谢您的关注，我希望您已经学会了一两件事，并喜欢玩CSS（谁不喜欢它？）。这里再看一下最终的演示 - 将其添加到Rachel在第一部分中创建的主题文件中！