html - 在滚动条上反转/更改 Logo

Question

askthecssguy.com 上的一篇文章展示了如何使用固定背景更改/反转滚动上的图像:http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/

我的目标是让图像漂浮在其他元素(在本例中为图像)之上，从而进一步推进这一概念。

您可以在此处查看结果:http://playground.iamkeir.com/invert-logo/v2/

但是，我的实现使用了多余的元素，因此，我想知道是否有人对实现此目标的其他方法有任何想法/建议？

Javascript 当然是一个选项，但我担心它不会精简/优雅。也有人建议使用 Canvas。

欢迎任何想法!谢谢。

Answer 1

您可以通过使用 :after CSS 伪元素来避免额外的标记。因此，您的最终标记将如下所示:

<ul>
        <li class="light">
            <img src="http://farm3.static.flickr.com/2802/4253151258_7d12da9e1c_z.jpg" />
        </li>
        <li class="dark">
            <img src="http://farm1.static.flickr.com/31/66005536_d1c5afca29_z.jpg?zz=1" />
        </li>
        <li class="light">
            <img src="http://farm4.static.flickr.com/3574/3646151231_0c68f4f974_z.jpg" />
        </li>
        <li class="dark">
            <img src="http://farm4.static.flickr.com/3432/3310214210_813d13c899_z.jpg" />
        </li>
    </ul>

修改后的 CSS 将是:

.dark:after,
.light:after,
.dark .after,
.light .after {
    position: absolute;
    display: block;
    content: '';
    top: 0; left: 0;
    height: 100%;
    width: 76px;
    background: transparent url(logo-white.png) no-repeat fixed 0 0;
    z-index: 5;
}

.dark:after,
.dark .after {
    background-image: url(logo-black.png);
}

注意那里有 .after 类。这是为了让它在 IE<8 中工作，不幸的是，它需要使用一个表达式:

.dark,
.light {
    behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );
}

虽然通常不鼓励使用表达式，但这不会对性能产生太大影响，因为它只被完全计算一次，并且当元素被创建时，条件返回 false。

不过，有一个陷阱。如果 IE8 在 IE8/IE8 模式下工作，伪元素将在图像下，除非你为后者设置negative z-index ，这并不总是可以接受的。

可以看看working example here .