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

使用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＆lt; 8中工作，遗憾的是，它需要使用表达式：

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

虽然通常不鼓励使用表达式，但是这个表达式不应该太多地影响性能，因为它只被完全评估一次，并且当创建元素时，条件返回false。

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

您可以查看working example here。

Answer 2

你要做的就是完全可以使用你只需要使用绝对定位来移动内容的当前代码。例如，使用测试页面http://askthecssguy.com/examples/fixedBackgroundImages/example01.html，您可以修改.header类并使其像这样。

.header {
background: url("images/cuckoo_color.jpg") no-repeat fixed 20px 20px #DBDED1;
left: -151px;
padding: 40px 40px 40px 300px;
position: absolute;

}

执行此操作将使文本浮动图像。更进一步而不是使用背景图像，您可以将透明PNG插入到自己的DIV中，并将其浮动到页面上的任何位置并保持其位置固定。您可以查看http://www.w3schools.com/css/css_positioning.asp以获取一些示例。

希望有所帮助！

维吉尔

滚动时反转/更改徽标

2 个答案: