滑块透明.png图像背景修复答案

【问题标题】：slider transparent .png images background fix滑块透明.png图像背景修复
【发布时间】：2012-02-10 19:33:36
【问题描述】：

我有一个我们的项目很奇怪的问题

这里

http://konyak.georates.net/page-2/

我们有一个通过 Kwicks 脚本制作的所谓图像菜单。问题是我们制作了 .png 格式的图像并且部分透明，因此当它们将一个滑动到另一个上时，通过这些透明部分从下往下的瓶子将在另一个上清晰可见。但是脚本 Kwicks 以某种方式获取页面主体背景颜色并用该颜色填充图像透明部分......如何解决这个问题？你能提示一下吗？

【问题讨论】：

您知道，背景颜色没有按照您的建议应用。发现是因为我可以firebug它并撤消body bgcolor并且问题效果仍然保持。
页面上存在 javascript 错误。尝试先修复它，也许会修复它
经过进一步审查，我很遗憾地告诉你，你不能以这种方式做你想做的事。你必须能够将图像位置设置为绝对位置，以便“真正”让它们的透明度重叠，否则，它们包含的盒子仍然会重叠它后面的任何东西。当然，这在背景透明中可能是可以绕过的，但是，我还没有能够产生这样的效果。只有当我改变绝对和相对的特定元素位置时，我才能让图像与透明度重叠。但同样，那只是萤火虫

标签： jquery css kwicks

【解决方案1】：

您需要删除应用于作为瓶子图像祖先的<li> 元素的overflow:hidden 属性：

ul#accordion-slider li {
    display : block;
    /*overflow: hidden;*/
    padding : 80px 0 0 0;
    float   : left;
    width   : 60px;
    height  : 350px;
}

我在我的开发者工具中进行了这个更改，瓶子无缝地相互重叠，它们之间没有垂直线。

更新

每次您将鼠标悬停在其中一张图片上时，您网页上的脚本似乎都会重新添加 overflow : hidden CSS。您可以通过将 !important 添加到声明 overflow : visible 的 css 规则来停止此操作：

ul#accordion-slider li {
    display  : block;
    overflow : visible;
    padding  : 80px 0 0 0;
    float    : left;
    width    : 60px;
    height   : 350px;
}

【讨论】：

它接缝你的代码帮助我克服了透明度问题......但有些东西让我觉得图像的移动机制有点奇怪......
是的，我也有同样的感觉。我会制作自己的脚本，因为它对于你想要的东西来说并没有太多的代码。在鼠标输入时，将另外两个图像滑动到他们需要去的地方并淡出它们，然后在鼠标移出时，将所有图像滑动到默认位置并将它们淡入。淡出我相信的非活动图像将使用户交互感觉更加流畅。
我希望我能有一些时间去做 :)))) 无论如何谢谢贾斯珀！

【解决方案2】：

你不能添加

background: transparent;

在弹出窗口内的 IMG 上？它会移除白色背景。

【讨论】：

它没有帮助，如您所见
它是在弹出窗口中删除悬停瓶上的白色背景，但我不确定您是否要求这样做。
确定我点击了瓶子 sry ;)