CSS 背景图像动画重叠一切。希望能够点击此链接答案

【问题标题】：CSS Background Img Animation overlapping EVERYTHING. Want to be able to click this and linkCSS 背景图像动画重叠一切。希望能够点击此链接
【发布时间】：2017-06-30 04:42:13
【问题描述】：

所以我正在开发我的第一个项目——我自己的个人网页。我有一个背景动画，它本质上是一个脉动的循环图像。我希望能够让用户单击图像的“输入”部分并将其重定向到我的主页，或者单击整个页面上的任何位置。

我的背景动画与所有内容重叠，无论我尝试做什么，它都会覆盖任何类型的附加图像或文本框，我尝试创建点击和链接到我的主页。有人有什么建议吗？

html:

    <!DOCTYPE html>
{% load staticfiles %}
<html lang="en">

<head>
    <title>Test</title>
    <meta charset="utf-8" />

 <link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/>
</head>
<body>


<div class="animation"></div>
<div class="body"></div>



<a class="element" href="website.net/link" title="photo" id="element">photo</a>




</body>
</html>

css:

 /* hide scroll bar. Y is vertical, x is horizontal*/
body {
    margin:0;
    padding:0;
    overflow-y: hidden;
    overflow-x: hidden;

}
/*pulsing background img */ 
.animation {
  width: 100%;
  height: 100%;
  animation: pulse 6s infinite;
  overflow:hidden;
  background-color: black;




}

@keyframes pulse {
  0% {
    background-image: url('img/home2.jpg');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    opacity: 1;


  }
  25% {
    background-image: url('img/home.jpg');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    opacity: 1;

  }

  50% {
    background-image: url('img/home2.jpg');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    opacity: 1;

  }
  75% {
    background-image: url('img/home.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    
    opacity: 1;


  }

  100% {
    background-image: url('img/home2.jpg');
    background-repeat: no-repeat;
    background-position: center;    
    background-size: cover;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    opacity: 1;


  }
}

html,
body {
  height: 100%;
}

【问题讨论】：

.animation 应该是position: absolute; left: 0; top: 0;，否则下面会显示其他元素。
顺便说一句，在动画关键帧定义的每一步中，没有必要重复在整个动画中不改变的css属性。只需将它们添加到元素本身的选择器中即可。

标签： html css image animation background

【解决方案1】：

制作.animation 元素

.animation {
  width: 100%;
  height: 100%;
  animation: pulse 6s infinite;
  overflow:hidden;
  background-color: black;
}

所以所有其他元素都将显示在它的顶部而不是它之后。也就是说，如果标记中的顺序保持在所有其他元素之后的方式。如果不是，则必须将其他元素（或围绕它们的包装元素）设置为 position: relative;，并为它们赋予比背景元素更高的 z-index 值。

【讨论】：

非常感谢，z-index 成功了。另外，请注意 CSS 属性注释。正如你所知道的，我仍然是一个初学者，正在学习我的方式。感谢您的帮助，+1！

【解决方案2】：

body 标签上的 JavaScript onClick 监听器怎么样？

您说您希望能够“单击整个页面上的任意位置”。如果您不介意或已经在使用 Javascript，则附加一个冒泡点击侦听器是实现此目的的一种简单方法。

<body onclick="window.location.href='website.net/link'">
    <div class="animation"></div>
    <div class="body"></div>
    <a class="element" href="website.net/link" title="photo" id="element">photo</a>
</body>

由于您在 cmets 中表示偏好避免使用 Javascript 并且使用 html5，因此您可以选择将其他元素包装在 <a> 标记中以获得类似效果，只要内容填满空间即可。

但是有一点需要注意，html5 不支持嵌套的<a> 链接。因此，由于按钮链接与页面链接相同，您可以将按钮更改为<button>标签

<a id="link-wrap" href="website.net/link">
    <div class="animation"></div>
    <div class="body"></div>

    <button class="element" title="photo" id="element">photo</button>
</a>

然后删除样式以防您有文本

#link-wrap {
    text-decoration: none;
    color: black
}

~~顺便说一句，我在 sn-p 中看不到开头的正文标记。~~

【讨论】：

如果可以用纯 html+css 解决，他为什么要使用 JavaScript 而不是链接呢？阻止没有 JavaScript 或爬虫的客户端进入/索引页面不是一个好主意...
感谢您指出body标签，我之前在胡闹时不小心删除了它。如果可能，希望避免使用 JavaScript，最好是 HTML+CSS。
@connum 我建议使用 JavaScript，因为他希望单击页面上的任何位置，如果您不介意 JavaScript，那么冒泡事件很容易。但是，鉴于希望避免使用 JavaScript，我也会建议另一种选择。