我有sveltekit自定義光標庫，但出于某種原因，混合混合模式css屬性不工作。這是我的光標文件。

<script>
    import { onMount } from 'svelte';

    const baseSize = 20;
    export let size = 20;
    export let color = 'black';
    export let shape = 'circle';
    export let mixBlendMode = 'none';
    let x = -100;
    let y = -100;

    onMount(() => {
    // some code
    });
</script>

<div class="cursor-wrapper" style="--x:{x}px; --y:{y}px">
    <div
        class="custom-cursor {shape}"
        style="transform: translate(-50%, -50%) scale({size /
            baseSize}); width: {baseSize}px; height: {baseSize}px; --mix-blend-mode: {mixBlendMode}; --background-color: {color}"
    />
</div>

<style>
    .cursor-wrapper {
        --x: -100px;
        --y: -100px;
        position: fixed;
        left: 0;
        top: 0;
        transform: translate(var(--x), var(--y));
        pointer-events: none;
        cursor: none;
    }
    .custom-cursor {
        --background-color: 'black';
        --mix-blend-mode: 'none';
        left: 50%;
        top: 50%;
        background-color: var(--background-color);
        mix-blend-mode: var(--mix-blend-mode);
        border-radius: 50%;
        z-index: 99999;
        /* Customize your cursor styles here */
        transition: transform 0.2s cubic-bezier(0.28, 0.8, 0.36, 1);
    }
    .custom-cursor.square {
        border-radius: 0;
    }
    .cursor-none {
        cursor: none;
    }
</style>

目前，其他所有屬性都可以工作，只是不能混合模式，有什么想法可能會有問題嗎？