v2.5.2
Giriş yap

Css'te background a blur vermek.

yefee
765 defa görüntülendi ve 1 kişi tarafından değerlendirildi

merhaba benim borderlara sahip bir dikdortgenim var
ben bu dikdortgene bir arkaplan ekledim ve borderlar etkilenmeden sadece arkaplan a blur vermek istiyorum
(not: arkaplani css ten verdim html den degil)

Cevap yaz
Cevaplar (3)
mustafaozk
1255 gün önce

Bu kanalda güzel css tasarımları var istersen bir bak opacity falan da gösteriyor .https://www.youtube.com/channel/UC4_Y573ksLfpVG2VgPfh7jQ/videos?view_as=subscriber

tayfunerbilen
1270 gün önce

Eğer filter özelliğini kullanırsan div içerisindeki yazılara ve diğer etiketlerede etki eder kullandığınız blur. Bu yüzden siz backdrop-filter özelliğini kullanarak bu işlemi yapacaksınız.

Çalışan bir örnek;

<div class="box">
	<div>ÖRNEK YAZI</div>
</div>
<style>
    .box {
    	width: 200px;
    	height: 200px;
    	background: url(https://picsum.photos/200/200) no-repeat center;
    }
    .box div {
    	width: inherit;
    	height: inherit;
    	display: grid;
    	place-items: center;
    	-webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }
</style>

Ya da bir başka örneği, ::before ya da ::after ile content ekleyerek filter kullanılarak yapılabilir. Buna örnek vermek gerekirse;

<div class="box">
	ÖRNEK YAZI
</div>
<style>
    .box {
	width: 200px;
	height: 200px;
	position: relative;
	z-index: 1;
}
.box::before {
	content: '';
	background: url(https://picsum.photos/200/200) no-repeat center;
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	z-index: -1;
	filter: blur(5px);
}
</style>