在动画渐变背景上实现 jquery fancybox答案

【问题标题】：implementing jquery fancybox over animated gradient background在动画渐变背景上实现 jquery fancybox
【发布时间】：2015-02-21 18:44:53
【问题描述】：

我有一个动画渐变背景，我正在尝试在它上面放置一个花式框。渐变和花式框位于两个不同的堆叠 div 中，但由于某种原因，渐变阻止了对可点击缩略图的访问。当我把渐变 div 拿走时，fancybox 就像一个美女一样工作。我应该怎么做才能使它们兼容？网址：http://studiopowell.net/TEST_gradient.html

</head>
<body>

<div id="titles"><img src="archive-icon.png" width="185" height="185" alt="studio powell michael powell studiopowell art artist books installation video" /><br /><br />&nbsp; M I C H A E L &nbsp; P O W E L L<br /><br /></div>
<a class="fancybox" rel="group" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>

<div id="gradient"></div>

</body>
</html>

css:

.fancybox {
    margin:auto;
    width:10%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
} 

 #titles {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color:#33;
    text-align:left;
    padding-left: 20px;
    padding-top: 10px;  
}

#gradient
{
  width: 100%;
  height: 1000px;
  padding: 0px;
  margin: 0px;
  opacity: 0.1;
  margin-top: -600px;
}

【问题讨论】：

标签： jquery css animation fancybox gradient

【解决方案1】：

只需将 CSS position 和 z-index 应用于您的元素，例如：

.fancybox {
    ...
    position: relative;
    z-index: 100;
}
#titles {
    ...
    position: relative;
    z-index: 100;
}
#gradient {
    ...
    position: relative;
    z-index: 10; /* lower for the gradient background */
}

【讨论】：

【解决方案2】：

发生这种情况是因为您的渐变容器位于您网站上所有其他元素的顶部。因此，当单击时 - 您只是单击渐变容器，而不是触发您的花哨框功能的元素。

为了解决这个问题 - 您需要确保要触发花式框脚本的元素位于顶部并且是可点击的。

最好的解决方案是创建一个包装器 div 元素来包装您的所有网站内容，并在该包装器上设置动画渐变。然后在该元素中插入所有图像/徽标等。例如

<div class="wrapper"> <-- Apply your Gradient animation to this element -->
    <div class="titles"></div>
    <a class="fancy box"></a>
</div>

按照这个方法 - 你可以确保你的花哨的盒子元素和所有其他网站内容仍然是可点击的。

【讨论】：

谢谢詹姆斯。这有助于使 fancybox 可用，但由于 div 的嵌套，fancybox 缩略图现在具有其父容器的不透明度（渐变）。有没有办法解决这个问题，或者这个组合是不可避免的？
解决方案似乎可以像将不透明度 css 从 div 移动到渐变颜色一样简单，但我似乎无法弄清楚如何。想法？