Comment faire un div avec effet vitreux et semi-transparent Stack Overflow

Pour IE utiliser la propriété filtre

Pour la transparence, vous devez utiliser la propriété de fond RGBA sur le conteneur div. fond: rgba (64, 64, 64, 0,5). 64, 64, 64 sont les valeurs de couleur RGB. et 0,5 est la valeur d'opacité. Maintenant parent peut avoir sa propre valeur d'opacité qui ne sera pas hérité par ses enfants. Ceci est entièrement pris en charge par FireFox, Opera, Chrome, Safari et IE9.







Pour soutenir Internet Explorer 5.5 à 8, nous devons utiliser « filtre gradient: » CSS spécifique au fournisseur Vous devez ajouter ceci.

filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 7f404040, endColorstr = # 7f404040);







Lorsque 7f représente 127, à savoir une opacité de 50% et 404040 est la couleur.

Pour un effet « vitreux », je pense que l'obtention de la transparence est que la première étape. Personnellement, « vitreux » aura aussi besoin d'artefacts de fond en diagonale (l'éclat et la brillance du verre?) Qui, je pense, besoin d'une sorte de CSS (+ en vous assurant qu'il ne se tord pas lorsque redimensionnée ou quelque chose).

De même, pour « glacé », je pense personnellement que vous aurez besoin d'une distinction semblable au gel, ce qui est normalement un artefact d'image disparate et aléatoire placé / répétée.

Vous pouvez trouver une démo ici

Si votre navigateur ne supporte pas les fonctionnalités CSS3, vous pouvez essayer. J'ai utilisé deux DIV, un contenu et un autre pour un effet de verre. J'ai fait à la fois de leur position absolue. En plus de cela z-index a été utilisé pour afficher les div ci-dessus une autre.

Copiez le code et l'essayer dans votre navigateur.

Ta Réponse







Articles Liés