Il est question assez populaire, je pense.fond fondu avec rideau transparent
Je cherche crossbrowser CSS solution pour couche opaque noire. Ce qui cachera tous les trucs en dessous.
Mon exemple: http://jsfiddle.net/pb9jv/. Mais ce n'est pas un navigateur. (IE 6+ est la douleur dans mon cul).
Essayez d'ajouter ce le style CSS que vous appliquez à l'fadeover (Dans votre exemple: #Black)
filter: alpha(opacity = 50);
EDIT: Vous voulez qu'il soit opaque ou transparent comme l'exemple donné?
quel est le différent entre transparent et opaque? Je me dire qu'il serait, par exemple, 0,5 opaque ou 50% transparent – fl00r
@ fl00r: opaque est l'opposé de transparent. 100% -opaque = transparent – Marnix
@Marnix, merci, mais dans mon cas c'est pareil. 50% transparent = 0.5 opaque :) – fl00r
Utilisez un div simple et appliquez-lui une image de fond avec une image de taille 1px de votre couleur. Juste un png simple avec votre couleur noire.
.overlay
{
background-image:url('myoverlaycolor.png');
}
Il se répète sur l'ensemble du div.
Modifier
Venez y penser, IE6 ne supporte pas .png droit? Peut-être que vous pourriez jeter un oeil dans des sources comme slimbox.
il s'agit de travailler de png transparent dans Internet Explorer – fl00r
David est juste - c'est la syntaxe. Cependant, votre violon ne fonctionnera pas dans IE6 puisque vous n'avez pas de valeurs de taille.
Voici un exemple: http://jsfiddle.net/4Aw4Q/ Si vous supprimez le calibrage, l'élément n'apparaîtra pas.
alors qu'en est-il de 100% de hauteur et 100% de largeur? il ne fonctionnera toujours pas dans IE 6 – fl00r
@Marnix Si vous utilisez des filtres appropriés, IE6 prend en charge le format PNG. Essayez ceci pour commencer
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pngimage.png', sizingMethod='scale');
Réglez le filtre ci-dessus en tant que classe pour la durée ou élément div contenant l'image et assurez-vous que la largeur et la hauteur de l'image sont définies.
Définissez également cette classe pour l'élément span ou div contenant l'image. Par conséquent, les classes ci-dessus devront être appelées pour le parent contenant l'image png.
@ fl00r: Avoir un élément div avec un indice z plus élevé avec screen.width et screen.height comme largeur et hauteur respectivement. Vous pouvez soit utiliser une image ou vous pouvez jouer avec des filtres d'opacité.
De toute façon, vous comptez sur jQuery, vous pouvez donc l'utiliser pour allonger la div jusqu'à la taille de la fenêtre. IE6 ne joue pas bien avec le truc d'étirement 'position: absolute'. – kapa