Маски не работают в Gecko

Question

Я пытаюсь замаскировать элемент, в котором есть несколько изображений, используя только CSS.Я сделал это, и он прекрасно работает в webkit, используя -webkit-mask-box-image, и он делает то, что я хочу, но у меня возникают проблемы с использованием других браузеров.

Геккон должен работать с использованием mask, и этот тегпоявляются в firebug, но на самом деле маска не используется. Я также пытался преобразовать png, который я использую, в данные base64 uri, но безрезультатно.

пример: http://jsfiddle.net/nNLta/

кто-нибудь знает правильный способ сделать это?

HTML

<div id='wrap'>  
        <div class='masked flashing-anim'>  
            <div class='the-mask' >  
                <ul>  
                         <li class='blink_1'></li>  
                        <li class='blink_2'></li> 
                </ul>  
            </div>  
        </div>  
        <div class='the-outline'>  
            <img src='img/real-stuff.png' height=500 />  
        </div>  
        </div>

CSS

   #wrap {
    position: relative;
   }
   .the-outline, the-mask {
      position: absolute;
      top: 0;
   } 
   .the-mask {
        height: 500px;
        width: 360px;
        -webkit-mask-box-image: url(../img/the-mask.png);
        -moz-mask-box-image: url(../img/the-mask.png);
        -o-mask-box-image: url(../img/the-mask.png);
        mask-box-image: url(../img/the-mask.png);
        mask: url(data:lotsofchars);
    }

пример: http://jsfiddle.net/nNLta/

Answer 1

Часть 1

mask это не то же самое, что mask-box-image, к сожалению. Если вы прочитаете (довольно редко) документы , вы увидите, что оно применимо только к SVG. Подробнее об этом позже.

В настоящее время Gecko не поддерживает 'mask-box-image' - если вы выполните поиск по MDN , вы увидите, что оно относится только к -webkit-.

Кроме того, я не думаю, что это на самом деле спецификация. У Webkit была такая возможность / концепция целую вечность (в различных формах, таких как -webkit-box-reflect), и я думаю, что это было просто похмелье тех дней. Я не уверен, будет ли это принято всеми поставщиками браузеров (хотя я надеюсь, и это имеет смысл, так и будет).

Часть 2

Чтобы использовать svg-зависимое свойство mask: css, вам нужно создать элемент SVG и ссылаться на него. Вот руководство . Я не использовал эту технику раньше, поэтому боюсь, что это все детали, которые я собираюсь рассмотреть прямо сейчас.

Альтернативный вариант

Если вам не нужна умная повторяющаяся / растущая маска, почему бы не создать большой png и наложить текст / изображение, которое вы хотите скрыть. Я не уверен, что понимаю, что вы в конечном итоге пытаетесь сделать, но мне это кажется довольно простым. Очевидная проблема заключается в том, когда вам нужно, чтобы материал за маской был выбираемым / интерактивным (ошибаться ... интерактивно, что ...); например, когда вы хотите применить маскирование к тексту или ссылкам. Чтобы обойти это, используйте pointer-events:none, который поддерживается в Gecko и Webkit (но больше ничего ...). Вот больше от MDN

Извините, у меня нет хороших новостей - если ничего из вышеперечисленного не поможет, пожалуйста, оставьте комментарий с вашим конкретным требованием, и мы посмотрим, не сможем ли мы обойти ограничения браузера.

Надеюсь, это полезно!