ფუნქცია brightness

ფუნქცია brightness საშუალებას გაძლევს შეცვალოთ ფონის სურათის სიკაშკაშე. ფონის საწყისი სიკაშკაშე განისაზღვრება მნიშვნელობით 100% ან 1, მათი შემცირებისას მცირდება სურათის სიკაშკაშეც. შესაბამისად, მნიშვნელობის 100%-ზე მეტად გაზრდისას სიკაშკაშე იზრდება. უარყოფითი მნიშვნელობები არ გამოიყენება, ხოლო ცარიელი მნიშვნელობა ავტომატურად აღიქმება როგორც 1.

სინტაქსი

სელექტორი {
	filter: brightness(რიცხვი);
}

მაგალითი

მოდით, ჩვენი სურათისთვის დავაყენოთ სიკაშკაშე 20%-ზე:

<div id="elem"></div>

#elem {
	filter: brightness(20%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

ახლა კი მოდით გავზარდოთ სურათის სიკაშკაშე 120%-მდე:

<div id="elem"></div>

#elem {
	filter: brightness(120%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

მოდით დავაყენოთ ჩვენი სურათისთვის საწყისი სიკაშკაშე:

<div id="elem"></div>

#elem {
	filter: brightness(1);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

იხილეთ აგრეთვე

ფუნქცია blur,
რომელიც აბუნდოვნებს ფონს
ფუნქცია contrast,
რომელიც აძლევს ფონს კონტრასტუნარიანობას
ფუნქცია drop-shadow,
რომელიც აძლევს ფონს ჩრდილს
ფუნქცია hue-rotate,
რომელიც აძლევს ფონს ფერიანობას
ფუნქცია invert,
რომელიც აბრუნებს ფონის ფერებს
ფუნქცია opacity,
რომელიც აძლევს ფონს გამჭვირვალობას
ფუნქცია sepia,
რომელიც ფონს სეპიაში გარდაქმნის
თვისება background,
რომელიც წარმოადგენს შემოკლებულ თვისებას ფონისთვის
თვისება background-image,
რომლის საშუალებითაც ბლოკს შეუძლია მიიღოს ფონის სურათი
თვისება filter,
რომელიც აძლევს სტილს ფონს