ფუნქცია opacity

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

სინტაქსი

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

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

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