ფუნქცია opacity

ფუნქცია opacity საშუალებას აძლევს შეცვალოს ფონის სურათის გამჭვირვალობა. მნიშვნელობა 100% ან 1 ტოვებს სურათს თავდაპირველი გამჭვირვალობით. მნიშვნელობა 0 ნიშნავს, რომ სურათი სრულიად გამჭვირვალე გახდება. ნებისმიერი რიცხვი, რომელიც მდებარეობს ამ დიაპაზონში, ადგენს ფონის ნაწილობრივ გამჭვირვალობას. უარყოფითი მნიშვნელობის მინიჭება შეუძლებელია. სტანდარტულად მნიშვნელობა უდრის 1.

სინტაქსი

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

მაგალითი

მოდით, დავაყენოთ ჩვენი სურათის გამჭვირვალობა 50%-ზე:

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

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

მაგალითი

ახლა კი დავაყენოთ გამჭვირვალობა 100%-ზე:

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

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

მაგალითი

ახლა კი ფუნქცია opacity-ში მივანიჭოთ მნიშვნელობა 0-ის ტოლი:

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

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

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

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