CSS 背景图像动画重叠一切。希望能够点击此链接
Posted
技术标签:
【中文标题】CSS 背景图像动画重叠一切。希望能够点击此链接【英文标题】：CSS Background Img Animation overlapping EVERYTHING. Want to be able to click this and link 【发布时间】：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属性。只需将它们添加到元素本身的选择器中即可。
【参考方案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，我也会建议另一种选择。以上是关于CSS 背景图像动画重叠一切。希望能够点击此链接的主要内容，如果未能解决你的问题，请参考以下文章