backdrop-filter ගුුණය

backdrop-filter ගුණය පෙරහන් (අස්පෘශ්‍ය කිරීම, විරුද්ධතාව වෙනස් කිරීම, වර්ණ බලපෑම්) මූලද්‍රව්‍යයක් පිටුපස පිහිටා ඇති ප්‍රදේශයට යෙදීමට ඉඩ සලසයි. මෙය "කඩදාසි" හෝ "හිම පතුරුවන ලද කඩදාසි" බලපෑමක් නිර්මාණය කරයි.

වාග් රීතිය

තේරීම {
	backdrop-filter: none | <පෙරහන> [<පෙරහන>]*;
}

අගයන්

අගය	විස්තරය
`none`	පෙරහන් යොදනු නොලැබේ (පෙරනිමි අගය).
`blur()`	අස්පෘශ්‍ය බලපෑම යොදයි (උදාහරණයක් ලෙස: `blur(5px)`).
`brightness()`	පසුබිමේ දීප්තිය වෙනස් කරයි (උදාහරණයක් ලෙස: `brightness(0.5)`).
`contrast()`	පසුබිමේ විරුද්ධතාව වෙනස් කරයි (උදාහරණයක් ලෙස: `contrast(200%)`).
`drop-shadow()`	පසුබිමට සෙවනැල්ලක් එක් කරයි.
`grayscale()`	පසුබිම අළු පැහැති කට්ටලයක් බවට පරිවර්තනය කරයි (උදාහරණයක් ලෙස: `grayscale(100%)`).
`hue-rotate()`	පසුබිමේ වර්ණ ස්වරය වෙනස් කරයි (උදාහරණයක් ලෙස: `hue-rotate(90deg)`).
`invert()`	පසුබිමේ වර්ණ ආපසු හරවයි (උදාහරණයක් ලෙස: `invert(100%)`).
`opacity()`	පසුබිමේ පාරදෘෂ්‍යතාව වෙනස් කරයි (උදාහරණයක් ලෙස: `opacity(50%)`).
`sepia()`	පසුබිමට sepia යොදයි (උදාහරණයක් ලෙස: `sepia(100%)`).
`saturate()`	පසුබිමේ වර්ණවල තෙත් බව වෙනස් කරයි (උදාහරණයක් ලෙස: `saturate(200%)`).

පෙරහන් කිහිපයක් එකට භාවිතා කළ හැකිය, ඒවා හිස්තැන් වලින් ලැයිස්තුගත කරයි.

උදාහරණය . සරල අස්පෘශ්‍ය කිරීම

පසුබිම අස්පෘශ්‍ය කිරීමේ මූලික බලපෑම:

<div class="blur-example">
	<div class="blur-box">
		Backdrop blur effect
	</div>
</div>

.blur-example {
	background: linear-gradient(135deg, #667eea, #764ba2);
	padding: 40px;
	height: 200px;
}

.blur-box {
	backdrop-filter: blur(6px);
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	padding: 20px;
	width: 80%;
	margin: 0 auto;
	text-align: center;
	color: white;
	font-size: 22px;
}

උදාහරණය . උණුසුම් ආලෝක පෙරහන

වැඩි කරන ලද දීප්තිය සහිත උණුසුම් ආලෝක බලපෑම:

<div class="warm-light-bg">
	<div class="warm-light">
		Warm lighting effect
	</div>
</div>

.warm-light-bg {
	background: url('bg.png');
	background-size: cover;
	padding: 50px;
	height: 250px;
}

.warm-light {
	backdrop-filter: brightness(1.2) hue-rotate(20deg);
	background-color: rgba(255, 235, 205, 0.3);
	padding: 25px;
	width: 70%;
	margin: 20px auto;
	text-align: center;
	color: #333;
	font-size: 24px;
}

උදාහරණය . gradiyent වේසිය සමඟ අස්පෘශ්‍ය කිරීම

අස්පෘශ්‍ය කිරීම සහ අර්ධ පාරදෘෂ්‍ය gradiyent එකතු කිරීම:

<div class="gradient-mask">
	<div class="mask-content">
		Gradient mask effect
	</div>
</div>

.gradient-mask {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.mask-content {
	backdrop-filter: blur(10px);
	background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0));
	padding: 30px;
	width: 80%;
	margin: 0 auto;
}

උදාහරණය . පැරණි සිනමා බලපෑම

Sepia සහ graininess එකතු කිරීම:

<div class="old-film">
	<div class="film-effect">
		Old film effect
	</div>
</div>

.old-film {
	background: url('bg.png') center/cover;
	padding: 40px;
	height: 250px;
}

.film-effect {
	backdrop-filter: sepia(80%) contrast(110%) brightness(90%);
	background-color: rgba(0,0,0,0.1);
	padding: 25px;
	width: 70%;
	margin: 20px auto;
}

උදාහරණය . සීතල නිල් පෙරහන

සීතල ආලෝක බලපෑම:

<div class="cold-bg">
	<div class="cold-effect">
		Cool blue filter
	</div>
</div>

.cold-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.cold-effect {
	backdrop-filter: hue-rotate(180deg) brightness(85%);
	background-color: rgba(200,230,255,0.2);
	padding: 30px;
	width: 75%;
	margin: 0 auto;
}

උදාහරණය . ඉහළ විරුද්ධතාව

වැඩි කරන ලද විරුද්ධතාව බලපෑම:

<div class="contrast-bg">
	<div class="contrast-effect">
		High contrast
	</div>
</div>

.contrast-bg {
	background: url('bg.png') center/cover;
	padding: 40px;
	height: 250px;
}

.contrast-effect {
	backdrop-filter: contrast(200%) brightness(90%);
	background-color: rgba(0,0,0,0.1);
	padding: 25px;
	width: 70%;
	margin: 20px auto;
}

උදාහරණය . ජල වර්ණ බලපෑම

වැඩි කරන ලද තෙත් බව සහිත මෘදු අස්පෘශ්‍ය කිරීම:

<div class="watercolor-bg">
	<div class="watercolor-effect">
		Watercolor effect
	</div>
</div>

.watercolor-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.watercolor-effect {
	backdrop-filter: blur(12px) saturate(200%);
	background-color: rgba(255,255,255,0.15);
	padding: 30px;
	width: 80%;
	margin: 0 auto;
}

උදාහරණය . පසුබිම මත සෙවනැල්ල

පසුබිම් රූපය මත සෙවනැලි බලපෑම:

<div class="shadow-bg">
	<div class="shadow-effect">
		Drop shadow effect
	</div>
</div>

.shadow-bg {
	background: url('bg.png') center/cover;
	padding: 40px;
	height: 250px;
}

.shadow-effect {
	backdrop-filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
	background-color: rgba(255,255,255,0.2);
	padding: 25px;
	width: 70%;
	margin: 20px auto;
}

උදාහරණය . සම්පූර්ණ ආපසු හැරවීම

පසුබිමේ වර්ණ සම්පූර්ණයෙන් ආපසු හැරවීම:

<div class="invert-bg">
	<div class="invert-effect">
		Full inversion
	</div>
</div>

.invert-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.invert-effect {
	backdrop-filter: invert(100%);
	background-color: rgba(0,0,0,0.1);
	padding: 30px;
	width: 80%;
	margin: 0 auto;
}

උදාහරණය . අඳුරු කිරීමේ බලපෑම

පාඨය කියවීමේ හැකියාව සංරක්ෂණය කරමින් පසුබිම අඳුරු කිරීම:

<div class="darken-bg">
	<div class="darken-effect">
		Darkened background
	</div>
</div>

.darken-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.darken-effect {
	backdrop-filter: brightness(40%);
	background-color: rgba(0,0,0,0.3);
	color: white;
	padding: 30px;
	width: 80%;
	margin: 0 auto;
}

උදාහරණය . වර්ණ ඉවත් කිරීමේ බලපෑම

පසුබිම සම්පූර්ණයෙන් වර්ණ ඉවත් කිරීම:

<div class="grayscale-bg">
	<div class="grayscale-effect">
		Grayscale filter
	</div>
</div>

.grayscale-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.grayscale-effect {
	backdrop-filter: grayscale(100%);
	background-color: rgba(255,255,255,0.2);
	padding: 30px;
	width: 80%;
	margin: 0 auto;
}

උදාහරණය . වැඩි කරන ලද තෙත් බව බලපෑම

පසුබිමේ වර්ණ ප්‍රබල කිරීම:

<div class="saturate-bg">
	<div class="saturate-effect">
		Super saturated colors
	</div>
</div>

.saturate-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.saturate-effect {
	backdrop-filter: saturate(300%);
	background-color: rgba(255,255,255,0.1);
	padding: 30px;
	width: 80%;
	margin: 0 auto;
}

උදාහරණය . ඒකාබද්ධ කලාත්මක බලපෑම

කලාත්මක බලපෑමක් සඳහා පෙරහන් කිහිපයක් එකතු කිරීම:

<div class="artistic-bg">
	<div class="artistic-effect">
		Artistic combination
	</div>
</div>

.artistic-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.artistic-effect {
	backdrop-filter: blur(3px) hue-rotate(90deg) saturate(150%) contrast(120%);
	background-color: rgba(255,255,255,0.15);
	padding: 30px;
	width: 80%;
	margin: 0 auto;
	color: white;
	text-shadow: 0 0 5px black;
}

උදාහරණය . අර්ධ පාරදෘෂ්‍යතා බලපෑම

පසුබිමේ පාරදෘෂ්‍යතාව නියාමනය කිරීම:

<div class="opacity-bg">
	<div class="opacity-effect">
		Opacity control
	</div>
</div>

.opacity-bg {
	background: url('bg.png') center/cover;
	padding: 50px;
	height: 300px;
}

.opacity-effect {
	backdrop-filter: opacity(50%);
	background-color: rgba(0,0,0,0.3);
	color: white;
	padding: 30px;
	width: 80%;
	margin: 0 auto;
}

බ්‍රවුසර ආධාරය

ගුණය නවීන බොහෝ බ්‍රවුසර වලට ආධාර කරයි, නමුත් සම්පූර්ණ cross-browser ගැළපුම සඳහා -webkit- උපසර්ගය අවශ්‍ය විය හැකිය.

මෙයද බලන්න

filter ගුණය,
එය බලපෑම් මූලද්‍රව්‍යයටම යොදයි
opacity ගුණය,
මූලද්‍රව්‍යයේ පාරදෘෂ්‍යතාව පාලනය කරයි
background-blend-mode ගුණය,
පසුබිම් රූප මිශ්‍ර කිරීමේ ක්‍රමය නිර්වචනය කරයි