Effet de réflexion d'image utilisant un CSS pur

J'ai changé entièrement votre code, j'utilise des gradients CSS3 avec une propriété transform , c'est un CSS pur avec une compatibilité maximale.

Ici, la clé que j'utilise est rgba() avec la propriété transform appliquée au second img qui cible le pseudo nth-of-type .

De plus, assurez-vous d'avoir appelé le position: relative; Sur l'élément parent parce que j'utilise :after pseudo pour la superposition de gradient en bas , j'utilise la position: absolute; Pour cela avec le bottom réglé sur 0

Démo (Avez-vous commis un peu d' erreur ici en utilisant rotate() car il ne donnera pas un effet de réflexion, il suffit de faire pivoter l'image en fait, merci de me référer à ma deuxième démonstration)

Demo 2 (Utilisation de l' scale pour les images en miroir, peut également utiliser rotateY , comme indiqué dans les commentaires …)

 #moz-reflect:after { content:""; width: 100%; height: 200px; position: absolute; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%); /*I've removed proprietary gradient codes from here, you can get it in the demo*/ } #moz-reflect img:nth-of-type(2) { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); } #moz-reflect { position: relative; } 

Démo 3 (La seule différence est, que j'utilise en height: 50%; pour :after pseudo, nous n'avons pas besoin de le coder dur)

Seul le code à modifier dans le bloc de code ci-dessus est la propriété de height qui se fixe à 50%

 #moz-reflect:after { content:""; width: 100%; height: 50%; /* Changed the unit over here */ position: absolute; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%); } 

Remarque: Afin de créer les gradients les mieux adaptés, par exemple, des gradients opaques noirs seront requis pour les sites Web en fond noir, que vous pouvez créer en utilisant Color Zilla .

Reflexion d'image, utilisant le black comme background . Seuls les changements apportés à l'extrait ci-dessus de code sont ceux qui appliquent l' background: #000; – background: #000; Au body et j'ai modifié le gradient en conséquence.

 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 49%, rgba(0, 0, 0, 1) 100%); 

Démo (Pour les sites Web utilisant des arrière-plans plus sombres, noir dans ce cas)

Remarque: n'a pas ajouté de propriétés exclusives pour le dégradé dans la démo noire

Vous pouvez également utiliser un élément d'image unique avec ::before and ::after , mais ce n'est pas très utile (encore), car il faut coder en dur une background-image:url() pour le pseudo-élément avant . Je publie cette réponse parce que quelqu'un d'autre peut vouloir le faire de cette façon, et nous espérons qu'un jour nous pourrons utiliser l' background-image: attr(src, url); syntaxe. (1) En juin 2014, aucun navigateur ne l'appuie.

Un violon: http://jsfiddle.net/DeedH/5/

Je suppose que vous avez un fond noir.

Structure:

1. img – image principale (effectivement affichée en arrière-plan)
2. ::before contenir la réflexion. Doit être display:inline-block afin d'utiliser la transform:scaleY pour basculer l'image.
3. ::after contenu un masque dégradé.

Le html: (notez que actuellement la src n'est pas utilisée).

 <img class="reflect" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx" /> 

Le CSS:

 .reflect { position:relative; display:block; height:300px; width:300px; background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx'); background-repeat:no-repeat; background-size:contain; content:''; } .reflect::before { position:relative; top:20%; height:100%; width:100%; display: inline-block; -moz-transform: scaleY(-.7); -o-transform: scaleY(-.7); -webkit-transform: scaleY(-.7); transform:scaleY(-.7); opacity:0.2; background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSYXWxD2yC7m2m1ZylyVq_r6yWE4ewJv64cmt3CpgbGdqZq3wEx'); background-repeat:no-repeat; background-size:contain; content:''; } .reflect::after { position:relative; top:-40%; height:70%; width:100%; background-image:-webkit-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); background-image:-moz-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); background-image:-o-radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); background-image:radial-gradient(top center, 50% 75%, rgba(0,0,0,0), rgba(0,0,0,1)); background-repeat:no-repeat; background-size:contain; content:''; } 

Notez que vous devez utiliser le content:''; Sur l' img lui-même, sinon les pseudo-éléments ne s'affichent pas.

Soyez également conscient que cela ne s'applique pas vraiment à une classe d'images parce que vous devez coder l'URL de l'image. Mais cela pourrait être utile si vous l'utilisiez par identifiant et utilisé js pour écrire les règles dans une feuille de style au niveau du document. Sinon, cela n'est utile que pour les images simples.

(1). Utilisation de l'attribut de données HTML pour définir l'URL d'image de fond CSS