在每个新 link 处触发背景图片

Question

我不是编码专家，我正在尝试触发一个不同的背景图像，当鼠标悬停时，整个页面都在背景中 link。

代码如下：

<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%; }

Answer 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() 更改为您的图片路径。

在每个新 link 处触发背景图片

Trigger background image at each new link

css

background

image

hyperlink

hover