带有边框半径和背景图像的 CSS 导航栏

Question

大家好。我正在尝试为我的导航栏实现一些功能以用于学习目的。我有一个想法，但不知道如何付诸实践。

我的 HTML 树：

主要

--- header > div > h1 和 p

--- nav > div > a*4

我为标签“main”设置了一个 background-image 以完全覆盖它。

我想让图片只适合我的标签“a”。

但不是将链接设置为红色背景颜色（如上图），我希望“主”背景图像适合。

Answer 1

a {
  background-image: url(var(--main));
  background-size: cover;
}