Инвертировать / изменить логотип на свитке - PullRequest
Новая
       23

Инвертировать / изменить логотип на свитке

12 голосов
/ 01 сентября 2011

В статье на askthecssguy.com показано, как изменить / инвертировать изображение при прокрутке с использованием фиксированных фонов: http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/

Моя цель развивает эту концепцию, позволяя изображению плавать над другими элементами (в этомcase case).

Вы можете увидеть результат здесь: http://playground.iamkeir.com/invert-logo/v2/

Однако моя реализация использует лишние элементы, и поэтому мне было интересно, есть ли у кого-нибудь какие-либо идеи / предложения другого путичтобы достичь этого?

Javascript - это, конечно, вариант, но я боюсь, что он не будет скудным / элегантным.Кто-то также предложил использовать Canvas.

Любые идеи приветствуются!Спасибо.

Ответы [ 2 ]

1 голос
/ 03 сентября 2011

Вы можете избежать дополнительной разметки, используя: после 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, что, к сожалению, требует использования выражения: </p> 

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

Хотя использование выражений обычно не рекомендуется, это не должно слишком сильно влиять на производительность, так какполностью оценивается только один раз, и когда элемент создается, условие возвращает false.

Однако есть одна ловушка.Если IE8 работает в режиме IE8 / IE8, псевдоэлементы будут при изображениях, если только вы не установите негатив z-index для последнего, что не всегда приемлемо.

Вы можете посмотреть рабочий пример здесь .

0 голосов
/ 02 сентября 2011

то, что вы пытаетесь сделать, вполне возможно, используя текущий код, вам просто нужно использовать абсолютное позиционирование для перемещения контента.Например, используя тестовую страницу 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 для некоторых примеров.

Надеюсь, это поможет!

Вергилий

...