Firefox Opacity (Transparancy) Gradient - выцветание изображения - PullRequest
Новая
       11

Firefox Opacity (Transparancy) Gradient - выцветание изображения

6 голосов
/ 13 апреля 2010

У меня есть элемент с содержимым внутри.

Элемент - с его содержимым - должен быть полностью непрозрачным слева, полностью прозрачным справа. Равномерно распределен справа налево.

Поскольку содержимое и фон, в которые он сливается, не являются фиксированными, заранее создать изображение невозможно.

Мне известно, что градиенты можно использовать в качестве фона (-moz-linear-Gradient), но это мне не помогает - здесь мне нужно, чтобы содержимое элемента само исчезло.

Я смог сделать это в IE (Alpha Mask) и Webkit (image-mask), но был полностью в тупике в FF.

Я не против использования SVG, если есть способ.

Пожалуйста, помогите?

Ответы [ 3 ]

4 голосов
/ 28 июля 2010

Эта страница объясняет, как этого добиться для FF 3.5 +

https://developer.mozilla.org/en/applying_svg_effects_to_html_content

Вы, вероятно, хотите что-то подобное в файле с именем mask.svg: 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     baseProfile="full">
     <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
        <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
      </mask>
</svg>

Затем включите в свой CSS следующее: 

mask: url(/path/to/mask.svg#m1);
0 голосов
/ 18 марта 2011

Я полагаю, что грязным решением может быть использование значений rgba. С их помощью вы устанавливаете webkit и moz-градиенты на div, который расположен прямо над тем контентом, о котором вы говорили.

Я не уверен, что у вас могут быть альфа-значения для градиентов IE. Единственная проблема с решением состоит в том, что интерактивность для объекта, стоящего за этим div, потеряна

0 голосов
/ 14 апреля 2010

Грязным решением было бы наложение элемента div точно поверх элемента с полностью прозрачным фоном слева и полностью непрозрачным справа с использованием линейных градиентов.

Я знаю, что это не красиво, но должно работать;)

...