<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head><div className="header"> </div>.header {
overflow: hidden;
background: green;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
width:100%;
}
Уточнение:
Пробовал на сайте добавить следующее:
filter: blur(3px) brightness(50%);вроде делает что-то похожее на то, что нужно, но эти эффекты затемняют и размывают все дочерние элементы родительского<div>. А у меня background image добавлен в inline style к родительскому<div>