【问题标题】:change div with background image to color ackground with transition left将带有背景图像的 div 更改为带有向左过渡的彩色背景
【发布时间】:2013-09-26 21:48:43
【问题描述】:

所以我有这个 img 用作导航栏 li 的背景,我希望它在:悬停时 img 将具有红色叠加颜色 - 我希望它具有颜色变化来自右侧的过渡向左

这是我正在使用的 img nav li img 所以请注意img是一个png,里面有一些transperen空格..

我已尝试搜索答案,但只能找到淡入淡出的过渡...

【问题讨论】:

  • 您是否仅限于使用 css3? jquery 有可能吗?

标签: html css hover transition


【解决方案1】:

最后的笔是here

我确实使用了 css 蒙版,特别有趣的是,使用 chrome 使用蒙版比使用 Firefox 更简单。该代码在firefox和chrome上都可以工作,我没有检查ie..

Here 有一个很棒的 CSS 蒙版教程。

【讨论】:

    【解决方案2】:

    请检查此demo

    这是一个纯 css 解决方案。

    (我为png添加了蓝色背景以显示透明空间)

    【讨论】:

    • 这有点像我想要的,只是我不希望红色影响 img 的透明部分......
    • 也许你可以使用z-index: -1;.overlay 类。但问题是,如果您不想对透明部分生效,则必须在此代码中使它们不透明,而不是透明;)
    • 让它不透明对我不起作用,因为在这个导航后面有一个图像幻灯片...如果我有一个在形状和透明度方面相同的图像并且我把它着色了red,会不会更容易得到我想要的效果?
    • 这样可以吗?过渡将在 325px 和 75px 之间。改变这个:.container:hover .overlay { left:75px; }
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-08
    相关资源
    最近更新 更多