我正在嘗試使用 SVG 創建透明的“星夜”效果。我將 SVG 內嵌在網頁上的黑色背景元素內。我從湍流過濾器開始，然後應用顏色矩陣以獲得所需的效果：

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...給出：

但這沒有 alpha 透明度；我希望它代表白色像素的平面，其亮度僅透過位於黑色背景上且不透明度較小而降低。所以我將其通過第二個過濾器來執行此操作：

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
        <feColorMatrix values="
            0 0 0 0 1
            0 0 0 0 1
            0 0 0 0 1
            1 1 1 0 0" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...給出：

這非常相似，但稍微暗一點。為什麼稍微暗一點？當覆蓋在黑色背景上時，從邏輯上講，它不應該產生相同的像素顏色嗎？