Je travaille sur un projet pour afficher des images différentes sur un mur commeAppliquer le filtre CSS3 propriété à une partie spécifique d'une image
Je veux appliquer la propriété filtre css3 « niveaux de gris » sur l'image que zone du cadre, pas sur l'ensemble de l'image https://www.w3schools.com/cssref/css3_pr_filter.asp
Une idée de comment faire cela, peut-être en appliquant des coords x, y pour filtrer?
Merci
exemple brut en démo (peut-être pas 100 % superposition exacte):
#Outer, #Inner{
background-image: url('https://i.stack.imgur.com/7kczi.jpg');
}
#Outer{
position: relative;
width: 687px;
height: 687px;
}
#Inner{
position: absolute;
left: 19%;
top: 5%;
width: 420px;
height: 320px;
background-position: 49% 10%;
filter: grayscale(100%);
}<div id="Outer">
<div id="Inner"></div>
</div>Vous pouvez utiliser un n Filtre SVG référencé via CSS pour filtrer une sous-section de votre contenu. La fenêtre de filtre est définie par les dimensions spécifiées dans feFlood.
img {
filter: url(#partgrey);
}<img src="https://upload.wikimedia.org/wikipedia/commons/9/90/Jos%C3%A9_Villegas_Cordero_-_The_Slipper_Merchant_-_Walters_37105.jpg">
<svg>
<defs>
<filter id="partgrey" primitiveUnits="objectBoundingBox">
<feFlood x="0.1" y="0.1" width="0.2" height="0.35"/>
<feComposite operator="in" in="SourceGraphic"/>
<feColorMatrix type="saturate" values="0"/>
<feComposite operator="over" in2="SourceGraphic"/>
</filter>
</defs>
</svg>
Merci pour votre réponse utile. En fait je ne peux pas utiliser l'image deux fois. Voici un exemple, je pense que cela pourrait aider https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap –
@RameezIqbal C'est la meilleure solution. Pourriez-vous fournir votre code afin que nous puissions voir avec quoi vous travaillez? Le lien w3school que vous avez fourni n'est pas lié à votre question. C'est juste une carte d'image qui lie à une page différente. – WizardCoder