La meilleure façon de cacher une image dans HTML5
Je me demandais quelle est la meilleure façon de masquer les images dans le HTML 5 ?
En fait je voudrais afficher cercle des vignettes dans une galerie sans se soucier de mon client avec la préparation de la circulaire de photos...
J'ai donc, à mon avis, deux options : Toile de masquage ou ancienne
Avez-vous d'autres idées ? Les meilleures pratiques ?
Grâce
a ma réponse de l'aide de l'u . si il n'a pas, vote moi que la bonne réponse
OriginalL'auteur Jk_ | 2011-12-01
Vous devez vous connecter pour publier un commentaire.
vous pouvez utiliser
border-radius
de l'image à la moitié de ses dimensions (de sorte que la frontière définit un cercle)mask
etmask-clip
propriétés (ici une belle démonstration : http://www.webkit.org/blog/181/css-masks/)Le choix dépend de l'objectif de navigateurs et le temps que vous souhaitez investir.
Pour un la croix-navigateur en conséquence, je recommande la ancienne, mais si vous voulez plus de formes (peut-être dynamiques) ou plus de la juste image de masquage, vous pouvez essayer de svg ou canvas.
Bien sûr, je voudrais un cross-browser viable résultat.. II va animer le masque et la taille du cercle après tout donc je pense que l'aide de css3 border-radius est la technique la plus appropriée, vous ne pensez pas ?
Bon résumé des options, mais cela pourrait être une réponse si vous avez inclus des détails (par exemple, avait un lien ou le code montrant comment le faire chaque, telles que le masquage d'un
drawImage
à l'aide de laglobalCompositeOperation
OriginalL'auteur gion_13
voir ce
cochez cette http://jsfiddle.net/WQSLa/1/
MODIFIER
u pouvez également essayer cette http://jsfiddle.net/jalbertbowdenii/WQSLa/3 comme suggéré par albert
OriginalL'auteur aWebDeveloper
Voici la méthode qui fonctionne le mieux pour moi:
Pour un 200px cercle, votre SVG pourrait ressembler à ceci:
Et votre CSS pourrait ressembler à ceci:
Et si vous voulez quelque chose de plus approfondi, j'ai trouvé ce guide très utile: http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/.
<img src="/images/myimage.jpg" id="image-mask">
.OriginalL'auteur Ryan
De mise à jour de la réponse, essayez de
clip-path
(voir cette css-tricks post).caniuse montre plus de 80% de soutien maintenant, si vous utilisez le
-webkit-
préfixe. Donc, c'est de travailler pour moi (c'est à dire/Edge, cependant, peuvent être des facteurs limitatifs):OriginalL'auteur dhc