change pngs to use as mask with white background

StephenBuley · Mar 13, 2024 · 563218e · 563218e
1 parent f6f60e8
commit 563218e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/public/Background Mask.png b/public/Background Mask.png
diff --git a/src/components/InstrumentPage.tsx b/src/components/InstrumentPage.tsx
@@ -62,7 +62,20 @@ export default function InstrumentPage<T extends Record<string, string[]>>({
           musicNotes[`${clef}${note}` as keyof typeof musicNotes] +
           musicNotes.staffEnd}
         </p> */}
-      <img src={`/${note}${clef}.png`} alt={`${note}${clef}`} />
+      <img
+        style={{
+          width: '300px',
+          height: '300px',
+          maskImage: `url(/${note}${clef}.png)`,
+          WebkitMaskImage: `url(/${note}${clef}.png)`,
+          maskPosition: 'center',
+          WebkitMaskPosition: 'center',
+          maskRepeat: 'no-repeat',
+          WebkitMaskRepeat: 'no-repeat',
+        }}
+        src={`/Background Mask.png`}
+        alt={`${note} ${clef}`}
+      />
       <div className="valves">
         {valveSet ? (
           valveSet.map((valve) => ({