Firefox Opacité (Transparence) Dégradé - Fondu d'une image

Question

J'ai un élément avec du contenu à l'intérieur.

L'élément - avec son contenu - doit être complètement opaque à gauche, totalement transparent à droite. Également noté de droite à gauche.

Comme le contenu et le fond, il est la fusion en ne sont pas fixés, il n'y a pas moyen de faire une image à l'avance. Je suis conscient que les dégradés peuvent être utilisés comme arrière-plans (-moz-linear-gradient), mais cela ne m'aide pas - ici, j'ai besoin que le contenu de l'élément lui-même disparaisse.

Je suis en mesure de le faire dans IE (Masque Alpha) et Webkit (image masque), mais ont été complètement déconcerté en FF.

Ça ne me dérange pas d'utiliser SVG s'il y a un moyen.

Aidez s'il vous plaît?

Answer 1

Cette page explique comment y parvenir pour FF 3.5+

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

Vous voulez probablement quelque chose comme ça dans un fichier appelé Icône de:

<?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> 

comprennent ensuite les éléments suivants dans votre CSS:

mask: url(/path/to/mask.svg#m1); 

Answer 2

Une solution sale serait de superposer un div exactement au-dessus de l'élément avec le fond totalement transparent sur la gauche et totalement opaque sur la droite en utilisant des gradients linéaires.

Je sais que ce n'est pas assez, mais il devrait fonctionner;)

Answer 3

Je crois qu'une solution sale pourrait être de tirer parti des valeurs RGBA. Avec ceux-ci, vous configurez un webkit et des dégradés de moz sur un div qui est juste au-dessus du contenu dont vous avez parlé.

Je ne suis pas sûr si vous pouvez avoir des valeurs alpha pour les dégradés IE. Le seul problème avec la solution est que l'interactivité de l'objet derrière cette div est perdue