在每个新链接处触发背景图像答案

【问题标题】：Trigger background image at each new link在每个新链接处触发背景图像
【发布时间】：2020-06-20 17:56:04
【问题描述】：

我不是编码方面的专业人士，我正在尝试触发不同的背景图像，当鼠标悬停在每个链接上时，它会将整个页面置于背景中。

代码如下：

<div class="bloc-films">
        <a href="project/crepuscule.html">Crépuscule en Mineur</a><br>
        <a href="project/belabandonne.html">Bel Abandonné</a><br>
        <a href="project/alicia.html">Alicia's Dream</a><br>
    </div>

这是 CSS

    .bloc-films {
font-size: 20px;
font-weight: 400;
font-style: italic;
text-align: center;
line-height: 200%;
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%; }

【问题讨论】：

标签： css image hyperlink background hover

【解决方案1】：

HTML代码

<div class="links">
  <a href="page-1.html" class="page-1">Page 1</a>
  <a href="page-2.html" class="page-2">Page 2</a>
</div>

CSS代码

.links a:hover::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.page-1::before {
  background-image: url("./img/bg-1.jpg");
}
.page-2::before {
  background-image: url("./img/bg-2.jpg");
}

将 background-image:url() 更改为您的图像路径。

【讨论】：