如何使用 element() 在 CSS 中将文本作为背景图像重复

我看到了一种设计趋势在各个地方流行。也许你也有看到。它就是那种将文本重复多次的设计。一个很好的例子是价格比较网站 GoCompare，他们在大型多渠道广告活动中使用了这种设计。

耐克也使用过这种设计，例如在这则广告中

我不禁想知道如何在网页上实现这种设计。我的意思是，我们可以很明显地直接在标记语言中重复文本。我们也可以使用 Photoshop 等工具将设计导出为图像，但将文本放在图像中对 SEO 和可访问性都不好。然后，还有一个事实，即使我们使用实际的文本，我们也不希望屏幕阅读器读出来。

多功能性
多功能性
多功能性
多功能性

好了，停止了！

这些考虑因素使这种设计在网页上似乎不切实际。然后我发现自己渴望使用 CSS 中长期存在但支持不佳的 element() 功能。它允许使用任何 HTML 元素作为背景图像，无论是单个按钮元素，还是包含大量内容的整个 <div>。

根据规范

element() 函数只复制引用元素的外观，而不是实际内容及其结构。作者应该只将其用于装饰目的。

出于我们的目的，我们将引用一个文本元素以获得重复效果。

让我们定义一个 ID，我们可以将其应用于要重复的文本元素。我们将其称为 #thingy。请注意，当我们使用 #thingy 时，我们必须在 element() 值之前加上 -moz-。虽然 element() 已在 Firefox 自 2010 年以来受到支持，但遗憾的是，它从那时起就没有在任何其他浏览器中实现。

.element {
  background-image: -moz-element(#thingy);
}

这是一个对我们之前看到的耐克广告的略微松散的再现。同样，需要 Firefox 才能按预期查看演示。

您看到了它的概念性工作原理吗？我将一个元素 (#versatility) 放置在页面上，通过将它的高度设置为零来隐藏它，将其设置为主体上的 background-image，然后使用 background-repeat 属性将其在页面上垂直重复。

element() 背景是实时的。这意味着如果引用 HTML 元素发生变化，使用它的元素上的 background-image 外观也会发生变化。这与使用自定义属性时的处理方式相同：更改变量，它将在所有使用它的位置更新。

当然，此属性还有其他用例。看看 Preethi 如何使用它来为文章制作页面内滚动导航。如果您想变得花哨，也可以使用 HTML 画布元素作为背景。我使用它的一种方式是在目录中显示页面的屏幕截图。Vincent De Oliveira 记录了一些非常有创意的示例。这是一个图像反射效果，如果您喜欢复古的网页设计。

很酷，对吧？再说一次，我希望我能说这是获得这种整洁设计效果的生产就绪方法，但目前情况就是这样。实际上，这很好地提醒我们为我们希望在浏览器中实现的功能发出自己的声音。在 WebKit 和 Chromium 中有开放的工单，您可以在其中这样做。希望我们最终会在 Safari 世界和 Chrome 世界的浏览器中获得此功能。

评论