[Résolu] La propriété mask en CSS - "Ne fonctionne pas"

[RESOLU]
Bonjour,

Merci pour vos retour par avance.

J'ai besoin de monter une image sous un masque (mask). Chose basique... mais voilà qu'il met impossible d'obtenir le résultat voulu, après une foule de tentative.

J'ai vérifié mon png masque
essayé avec les version "webkit", regardé des tutos, un bouquin ici sur le HTML CSS...mais rien y fait !

Plus d'idée...

Je glisse un jpeg qui expose un essai isolé...et les étape ci-dessous du code auquel est destiné les masquages.

La source HTML:

<!--illustrations visuelles avec masque-->
<div class="conteneur-illustrations-visuelles">
<!-- élément div qui contient notre illustration à masquer-->
  <div class="conteneur-illustration1">
    <img  class="illustration-robot1" src="../img/robot1.jpg" alt="robot1">
  </div>
</div>

.illustration-robot1{
  width: 634px;
  margin-left: -220px;
  mask-image: url(../mask/mask2.png);
  mask-mode: alpha;
}

Merci pour vos retour !
S: [/b]
Modifié par lvbeethoven (10 Mar 2022 - 13:05)

Bonsoir,

en regardant rapidement, je vois : mask2.png et Test.mask.png , puis aussi test.mask.png dans l'extrait de code en screenshot.

Est tu certain de tes noms de fichiers (case) ? et chemin aussi par la même question?

cdt

Bonsoir,

Oui, les noms de fichiers sont corrects, non vraiment le pb ne vient pas de là.
En jpg, c'est un essai isolé.. sur une page vierge HTML avec CSS pour voir si ça fonctionnait seul, mais rien.

Au dessus (code) c'est la version sur lequel je travaille, ou doit être embarqué les masques...

J'ai pensé à tous !

- Le png qui n'est pas alpha ? J'ai essayé en svg, j'ai essayé avec des alpha sur le web, 1 depuis illustrator... etc. Rien.
- J'ai pensé qu'un élément dans le code, pouvait caché le résultat... en fait non.
- J'ai essayé sur un autres éditeur de texte
- Sur Chrome, firefox, safari, opéra.
- Rien y fait, je suis sur puce m1 (Mac), je me suis demandé si ça pouvait venir de là...

Pour dire ou j'en suis...

J'ai pensé à tout !

Le retour que j'ai pour le moment, à l'instant, c'est que quand je met un "webkit" dans le code, le navigateur réagi.

.illustration-robot1{
  width: 634px;
  margin-left: -220px;
  -webkit-mask-image: url(../mask/mask3.svg);
  -webkit-mask-mode: alpha;
}

Sa réaction est de rendre l'image qui doit être en partie masqué, absente.
"comme si elle disparaissait"... c'est peut-être une piste ?
Peut-être qu'elle est totalement masquée, je ne sais pas. Je cherche...

J'ai tellement tourné autour... ça devient énigmatique cette histoire et ça rend fou.
Modifié par lvbeethoven (09 Mar 2022 - 23:04)

Bonjour,

Ça marche, mask, mais le préfixe est indispensable. Voir https://jsfiddle.net/parsimonhi/6e1gthj0/

Il est probable que l'url du masque n'est pas bonne. Attention, cette url, quand elle est relative, doit l'être par rapport à l'endroit où se trouve ton fichier css, et non par rapport à l'endroit où se trouve ton fichier html.

Mais ici, vu la simplicité du masque, tu peux mettre du svg directement dans le css comme je l'ai fait dans mon exemple js fiddle.

Note : il est probable que ton cas, la propriété css clip-path serait plus adaptée.

Amicalement,
Modifié par parsimonhi (10 Mar 2022 - 00:35)

Merci pour cette réponse Parsimonhi.

Ok donc -webkit- est indispensable.

a écrit :
cette url, quand elle est relative, doit l'être par rapport à l'endroit où se trouve ton fichier css,

Voilà ou se trouve le masque:


Url du masque:

-webkit-mask-image: url(../mask/mask3.svg) 

On peut choisir mask2.png aussi

La position de l'image en HTML

  <img  class="illustration-robot1" src="../img/robot1.jpg" alt="robot1">

Je ne comprends pas le fichier svg (sa formulation) en url dans votre exemple.

Merci pour les retours,
Modifié par lvbeethoven (10 Mar 2022 - 07:47)

Bonjour,

Quel est le code de mask3.svg ? (un svg est un fichier texte, il peut être posté ici).

Dans mon code, j'ai juste mis le code du svg à la place du chemin vers le fichier. Et dans ce cas, on fait précéder ce code par data:image/svg+xml;utf8,

Amicalement,
Modifié par parsimonhi (10 Mar 2022 - 11:37)

Bonjour,

Juste une idée en passant : on est bien d'accord que tu utilises un serveur, même quand tu testes en local ?

Amicalement,

Merci pour ta réponse Parsimonhi,

a écrit :
tu utilises un serveur, même quand tu testes en local ?

Non pour l'instant comme c'est que du HTML CSS, je n'utilise pas de serveur.
J'ouvre un navigateur et je charge le fichier HTML principal du site (index.html)

Le svg "mask3.svg" en question:

<svg id="Composant_1_1" data-name="Composant 1 – 1" xmlns="http://www.w3.org/2000/svg" width="634" height="850" viewBox="0 0 634 850">
  <rect id="Rectangle_12" data-name="Rectangle 12" width="634" height="850" opacity="0"/>
  <path id="mask" d="M80,0h0a80,80,0,0,1,80,80V850a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V80A80,80,0,0,1,80,0Z" transform="translate(237)"/>
</svg>

a écrit :
Dans mon code, j'ai juste mis le code du svg à la place du chemin vers le fichier. Et dans ce cas, on fait précéder ce code par data:image/svg+xml;utf8,

Ah d'accord... bon à savoir, merci pour l'explication.
Modifié par lvbeethoven (10 Mar 2022 - 12:21)

a écrit :
Règle de parsimonhi N°42 : "Tu testeras tes pages en local avec un serveur, et non pas en utilisant le protocole file://."
Ne cherche pas plus loin, c'est ça qui empêche ton code de fonctionner. Dans le css, il y a l'instruction url(), et elle a besoin d'un serveur pour fonctionner.
Amicalement,

Arf !!!!! x10
Je vais essayer de suite !

Fut un temps j'avais un super système pour être sur serveur: "vagrant, Laravel, VirtualBox...", un serveur direct sur l'ordi, mais là j'ai changé d'ordi "Mac avec puce M1"... VirtualBox n'est pas dispo sur ce type d'architecture... du coup n'étant pas expert en développement informatique, je n'ai plus de serveur comme ça et je n'arrive pas à installer quelque chose de similaire, mais c'est un autre sujet ça.

Je vais tester sous MAMP cette histoire de masque.
Espérons que ça fonctionne... Je reviens annoncer...
Merci en tous cas, bonne journée !

C'est bon ça marche, c'était ça !

Enfin....
Mon cerveau commençait à devenir fou
Merci Parsimonhi !


Modifié par lvbeethoven (10 Mar 2022 - 13:06)