Efekt ze zdjęcia w css

Question

Witam, chciałbym uzyskać efekt jaknajbardziej podobny do tego z owego zdjęcia:

Chodzi o efekt tła, który działa na podstawie zdjęcia, blur chyba tu nie zadziała...?

Answer 1

<div class="background-blur">
<img src="adres zdj" class="back"/>
</div>

.back
{
	width: 110%;
	height: 110vh;
	position: absolute;
	top: -5%;
	left: -5%;
	z-index: -12;
	filter: blur(30px);
}
.background-blur
{
overflow:  hidden;
width:100%;
height:100vh;
position:fixed;
}

To powinno pomóc.

Comments

To jest własnie to, dzięki! Jak już piszę powiedz mi jest możliwośc aby 'rozmazanie' wpadalo w ciemny kolor? (tak jak na zdjeciu?)

---

filter: brightness(-x);

x-to poziom

Answer 2

Można coś takiego osiągnąć za pomocą samego CSS-a przy użyciu filter blur i pokombinowaniu z pseudoelementem. Przykładowa implementacja .

Answer 3

Rozmyj zdjęcie w jakimś programie graficznym i ustaw na tło.

Comments

Potrzebuję uzyskać owy efekt dynamicznie, stąd muszę to mieć w CSS