semi transparent div dans une page web
Hey suis en train d'élaborer un site web où je veux afficher un div avec un semi arrière-plan transparent de sorte que le fond de la page est visible.
je veux que cela fonctionne sur tous les navigateurs.
suis bien à l'aide de CSS , JS ou jquery...
merci de me donner des suggestions et, si possible, un exemple de code..
Merci d'avance,
Raj
OriginalL'auteur Raj | 2010-02-24
Vous devez vous connecter pour publier un commentaire.
Probablement votre meilleur pari est d'utiliser pur CSS. Cette technique fonctionne sur Safari 3.2+, IE 5.5+, Firefox 3.05+, Chrome 4+, Opera 10+
Tellement vrai, mais ayant la possibilité est super sympa, par opposition à fausser autour de avec la PNG + pngfix pour IE tout de même... 🙂
Ou si vous êtes comme moi et que vous travaillez avec vos propres projets personnels pour le plaisir, vous pouvez simplement vous asseoir et de dire "Vis à savoir" ^_^
OriginalL'auteur Owen
Pour CSS compatible navigateurs: Élément.style.l'opacité = décimal entre 0 et 1
Pour IE [aka, le diable] : l'élément.style.filtre = "alpha(opacity="+(Nombre de 0 à 100)+")"
Exemples sur: http://www.w3schools.com/Css/css_image_transparency.asp
Noter que texte/contenu dans le div deviendra semi-transparent.
Exemple qui définit l'opacité d'un div à 50%:
Par la voie, 1 [ou, dans le cas de l'ei, 100] est Totalement visible, tandis que 0 est totalement transparent.
Espère que ça aide! 😉
Il a dit qu'il était très bien avec l'aide de JS. Dans mon cas, je ne travaille pas beaucoup avec le "classique" éléments, tels que div, span, que ce soit. J'ai joué avec de la toile exclusivement. De ce fait, je n'ai pas vraiment utiliser les feuilles de style plus. Depuis que je travaille avec JavaScript tellement, je trouve ça bordélique si j'ai une tonne de CSS et une tonne de JavaScript, de jouer avec le style d'un élément. Bien sûr, si vous êtes à la conception statique-ish site web, en utilisant le <style> tag est très bien.
OriginalL'auteur Warty
Si vous utilisez
opacity
la ensemble div, y compris le texte, à ce niveau d'opacité.Si vos visiteurs à l'aide d'un Webkit (Chrome, Safari), Gecko (Firefox) navigateur (éventuellement Presto (Opera), trop, mais je ne suis pas sûr), alors vous pouvez utiliser:
#divToMakePartiallyOpaque {background-color: rgba(150,150,150,0.5); }
Où le rouge, le vert et le bleu sont mis à
150
et l'alpha est mis à0.5
(à mi-chemin entre totalement transparent et complètement opaque).Il y a aussi la possibilité d'utiliser partiellement transparent background-image, comme l'a noté ailleurs.
OriginalL'auteur David Thomas
Vous pouvez également utiliser une semi-transparent PNG. IE 6 ne prend pas en charge semi-transparence autant que je sache, mais je crois que IE7+ et le reste de la majorité des navigateurs ne.
OriginalL'auteur Eric
Si vous êtes OK avec jQuery solution, le travail pour tous les navigateurs que jQuery prend en charge (Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+, Chrome 1+):
OriginalL'auteur Elmo
Elmo saids ou:
OriginalL'auteur Virgili Garcia