HTML/CSS - créer un masque alpha de l'image
J'aimerais créer un effet dans un site que je suis en train de construire où une image est masquée par une superposition. L'extension doit créer un “fade out” effet — je ne veux rien d'animation, mais la superposition doit rendre l'image comme si c'est la décoloration de la couleur d'arrière-plan sur les bords.
Quelque chose comme ceci: http://imgur.com/fqtc9.png
Je préfère le faire avec du CSS/HTML/JS - pas d'images. Des idées sur où commencer? Merci.
OriginalL'auteur sa125 | 2010-07-29
Vous devez vous connecter pour publier un commentaire.
vous pourriez faire quelque chose comme ceci par exemple : Exemple
html
CSS
OriginalL'auteur Nate Nolting
Ah — en fonction de votre commentaire sur antyrat réponse, votre meilleur pari est de créer une image PNG qui contient l'effet (c'est à dire semi-transparent blanc de forme), et le positionner sur le haut de votre image à l'aide de CSS (
position:absolute
etz-index
seront impliqués).Vous ne pouvez pas actuellement de créer des formes carrées à l'aide de HTML et CSS seul.
Si le fondu de l'image est à l'intérieur d'un enfant
DIV
, avez-vous vraiment besoin d'utiliserz-index
?ouais, j'ai pensé à utiliser une image semi-transparente, mais il espérait que quelqu'un a une solution plus propre 🙂 merci!
Vous pouvez utiliser l'opacité pour créer une semi-transparent blanc de la zone, mais ce domaine est carré, avec des bords tranchants: pas de décoloration du bord. WebKit prend en charge des gradients CSS y compris les dégradés radiaux (ainsi que des couleurs rgba), donc, en fonction de l'effet que vous voulez, vous pourriez être en mesure de le faire avec de la pure CSS dans WebKit. Mais pas les autres navigateurs actuellement prise en charge.
probablement pas, si vous avez un
div
(avecposition: relative
) contenant l'image et le fondu de l'image.OriginalL'auteur Paul D. Waite
Je sais que vous vous demandez spécifiquement pour un CSS/JavaScript solution, et je suis sûr que vous avez vos raisons.
Néanmoins, je voulais juste jeter la solution la plus simple d'une unique délavé fichier image comme vous avez déjà posté votre question avec pas de fantaisie, programmé effets.
OriginalL'auteur JohnB
Commencer avec jQuery. Voir, par exemple, fadeIn fonction.
Statique alpha masque sur une image, utilisez l'opacité d'une propriété css:
J'ai mis à jour ma réponse, regardez maintenant.
Cela donnera simple opacité et pas un masque alpha qui varie en fonction de l'opacité à travers l'image.
OriginalL'auteur antyrat
Le jQuery
animate
fonction (avec une opacité) doit/peut être capable de gérer cela, mais antyrat la réponse devrait fonctionner aussi bien tout simplement si vous fadein la superposition.OriginalL'auteur smdrager