html – 翻转/更改滚动标志

发布时间：2020-12-14 23:48:37 所属栏目：资源来源：网络整理

导读：关于askthecssguy.com的文章显示如何使用固定的背景更改/反转滚动图像： http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/ 我的目标通过使图像浮动在其他元素(在这种情况下为图像)的前提下进一步扩

关于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.

任何想法欢迎！谢谢.

解决方法

通过使用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);
}

请注意,在那里上课.这是为了使其在IE< 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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!