filtre d’opacité ne fonctionne pas dans firefox

Je suis nouveau sur html et css / jquery. J’ai quand même réussi à créer un site Web par moi-même en utilisant l’élément inspect de chrome et d’autres sources. Mais, le filtre d’opacité ne fonctionne pas dans Firefox (la version de Firefox utilisée est 20.0.1). Pour la section “myHobbie”, toutes les images utilisent le facteur d’opacité ( -webkit-filter:opacity = 50% ), mais en ce qui concerne firefox, j’ai constaté qu’elle ne prend pas en charge webkit.

Quelqu’un peut-il me donner une autre solution pour que cela fonctionne à la fois pour Firefox et Chrome? Aussi, si possible, pour IE aussi.

L’URL de mon site Web est la suivante: www.srikarshastry.com/index_vertical.html

Merci d’avance.

Tout d’abord, ce que vous faites mal, c’est

 -webkit-filter:opacity=50% 

Je ne vais utiliser que dans les navigateurs avec un moteur Webkit comme chrome safari, etc. plus de détails . Dans votre cas, Mozilla Firefox utilise un moteur différent qui est gecko . Pour le gecko, vous devez définir l’opacité comme

 -moz-opacity:0.5; 

OU

 opacity: 0.5; 

Les parameters de transparence pour tous les navigateurs sont donnés ci-dessous.

 .transparent { /* Theoretically for IE 8 & 9 (more valid) */ /* ...but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* This works in IE 8 & 9 too */ /* ... but also 5, 6, 7 */ filter: alpha(opacity=50); /* Older than Firefox 0.9 */ -moz-opacity:0.5; /* Safari 1.x (pre WebKit!) */ -khtml-opacity: 0.5; /* Modern! /* Firefox 0.9+, Safari 2?, Chrome any? /* Opera 9+, IE 9+ */ opacity: 0.5; } 

Plus de détails vous pouvez consulter ce lien

Essayez cette opacité: 0.5 pour firefox

 opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ 

pour firefox, utilisez simplement:

 opacity:0.5 

IE9, Firefox, Chrome, Opera et Safari utilisent l’opacité de la propriété pour la transparence. La propriété opacity peut prendre une valeur comprise entre 0.0 et 1.0. Une valeur inférieure rend l’élément plus transparent.

IE8 et les versions antérieures utilisent filter: alpha (opacity = x). Le x peut prendre une valeur comprise entre 0 et 100. Une valeur inférieure rend l’élément plus transparent.

http://www.w3schools.com/css/css_image_transparency.asp

Essaye ça

  /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Firefox */ -moz-opacity: 0.5; -webkit-opacity: 0.5; /* Chrome & Safari */ /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; 

Merci à tous. Cela a fonctionné finalement. Les effets de vol stationnaire étaient foirés. Donc, j’ai apporté des modifications:

 /*Hover effects*/ #gallery a img:hover { filter: alpha(opacity=100); opacity: 100; } /*Default state for brightness has to be specified specifically*/ #gallery a img.brightness:hover { -webkit-filter: brightness(0); brightness: 0; -moz-brightness:0; filter: alpha(opacity=100); opacity: 100; }