框阴影 - 单击后面的图像 + 慢速滚动答案

【问题标题】：box shadows - clicking images behind + slow scroll框阴影 - 单击后面的图像 + 慢速滚动
【发布时间】：2012-11-14 11:17:56
【问题描述】：

我有两个相互交织的棘手问题。我在盒子的四个侧面有一个嵌入的盒子阴影晕影，但我在里面有可点击的图像，我无法点击，因为阴影/晕影在图像上方（位于 z-index：-1）。我读了一些关于使用指针事件的文章：无，但我认为当我尝试使用它时它会影响盒子里的所有东西，所以它没有用。有关如何使这些图像可点击但仍处于阴影后面的任何建议？

另外，我已经阅读了之前有关使用框阴影的滚动速度的帖子。我已经把它做得尽可能小，但有没有人想出如何让它更快？我真的很喜欢它的外观，但如果滚动速度太慢，该功能将无法正常工作。

这里是到目前为止构建的网站的链接。

http://www.official-design.com/TEST_PROJECT.html http://www.official-design.com/TEST_GRID.html

请客气——我是这方面的新手——我是建筑师而不是网页设计师。任何建议将不胜感激。

【问题讨论】：

你真的有滚动速度的问题吗？我相信这纯粹是脚本设置的问题。

标签： overlay z-index css vignette

【解决方案1】：

为什么链接有z-index: -1？删除它，链接工作正常，阴影仍然可见。

我还建议将框阴影直接应用于img 或a 元素，而不是包含它们的td。

【讨论】：

【解决方案2】：

移除负片z-index 不适用于嵌入阴影。要实现您的需要，需要做 3 件事：

从#makeMeScrollable div.scrollableArea img 规则中删除多余的float: left。这是为了确保<a> 元素正确包裹图像。
从.SHADOW 规则中删除box-shadow 属性。

为您的链接添加以下 CSS：

.SHADOW a {
  display: block;
  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}

请注意，我使用了rgba 值而不是#ccc，因为阴影会覆盖在图像上。

附带说明，没有必要以全部大写的形式命名类。它降低了可读性。

【讨论】：