css - div 的 SVG 背景模糊，设置了 backgroundColor

Question

我正在尝试使用 svg 作为 div 元素的背景。

import backgroundHp from './../../assets/img/background_shapes_hp.svg'

<div className="layoutContainer" style={{ backgroundImage: `url(${backgroundHp})`, backgroundColor: '#1a183e', backgroundPosition: 'center 310px' }}>
... content
</div>

CSS：

.layoutContainer {
    padding: 0;
    overflow: hidden;
    position: relative;
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-size: auto;
    min-height: 100%;
}

使用此设置，我的背景变得模糊。看起来它不再是 svg 了。但是当我不设置backgroundPosition时，我的背景很清晰。左图设置了backgroundPosition，右图没有设置backgroundPosition。

我究竟做错了什么？如何设置 backgroundPositionbut 并仍然获得清晰的背景？

标签： cssreactjssvg