Dekking in CSS is een eigenschap die specificeert hoe de transparantie van elementen zoals inhoud of afbeeldingen . Met behulp van deze eigenschap kunnen we instellen dat alle afbeeldingen volledig ondoorzichtig zijn ( zichtbaar ), volledig transparant ( verborgen ), of doorschijnend (gedeeltelijk zichtbaar). Er is een numerieke waarde nodig die tussen 0 en 1 ligt. Waarbij 0 volledig transparant definieert en 1 volledig zichtbaar. Dekkingswaarden tussen 0 en 1, zoals 0,2, 0,4, 0,6, enz., veranderen een afbeelding van transparant in ondoorzichtig door de decimale waarde geleidelijk te verhogen.
Syntaxis
opacity :
De numerieke waarde moet tussen 0 en 1 liggen om de afbeelding semi-transparant te maken. Als we 1 opgeven, is de afbeelding ondoorzichtig, als de numerieke waarde 0 is, wordt de afbeelding volledig transparant.
Java-collectie
voorbeeld 1 : In dit voorbeeld gebruiken we de eigenschap Opacity om het element transparant te maken wanneer we de muis over het element bewegen.
Hoofd.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Uitvoer
Beweeg de muis over het rode vak om een transparant of dekkingseffect weer te geven.
tekenreeks bevat
Overgangsdekking in CSS
In CSS is een transparantie van de overgang is een eigenschap die wordt gebruikt om de dekkingsstatus soepel van het ene niveau naar het andere te veranderen. Het betekent dat de overgangsopaciteit de status van het ondoorzichtige element verandert in transparant met een gedefinieerde tijdsduur. De overgang heeft vier eigenschappen: transition-property , transition-duration, transition-timing-function en transition-delay , die worden gebruikt om het dekkingseffect op een afbeelding uit te voeren. De transitie-duur is een belangrijke eigenschap voor geleidelijke veranderingen of plotselinge veranderingen die het dekkingseffect op een element gedurende een gedefinieerde tijdsduur in milliseconden of seconden weerspiegelen.
De verkorte eigenschap van de overgang is als volgt:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntaxis om de transparantie van de overgang in CSS te definiëren
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Overgangseigendom
Hieronder volgen de overgangseigenschappen die worden gebruikt om de overgangseffecten te regelen.
| Waarde | Beschrijving |
|---|---|
| Overgangseigendom | Het wordt gebruikt om de naam van de CSS-eigenschap te definiëren die het overgangseffect naar afbeeldingen weergeeft. |
| Overgangsduur | Het wordt gebruikt om de tijdsperiode in seconden of milliseconden te definiëren om het overgangseffect weer te geven. |
| Transitie-timing-functie | Het wordt gebruikt om de snelheidscurve op een afbeelding te definiëren om het overgangseffect weer te geven. |
| Overgangsvertraging | Specificeert of het overgangseffect op het element of de afbeelding wordt geïnitieerd. |
Opmerking: bij het instellen van de overgangseigenschap op de afbeelding of de inhoud moeten we de overgangsduureigenschap definiëren; anders wordt de duur 0 en vertoont deze geen enkel effect.
De behoefte aan overgangsopaciteit in CSS
De dekking is een eenvoudige CSS-eigenschap die wordt gebruikt om de transparantie van een afbeelding te regelen door het dekkingsbereik in te stellen van 0 tot 1. Het weerspiegelt de statische of plotselinge verandering van een element om het dekkingseffect weer te geven. Als we een afbeelding bijvoorbeeld transparant willen weergeven, moeten we de dekkingswaarde instellen van 0 op 1. Daarna wordt het dekkingseffect onmiddellijk weergegeven in plaats van dat het enige tijd kost. Daarom gebruiken wij een transparantie van de overgang in CSS dat de transparantie van een element over een gedefinieerde periode regelt. Met behulp van de transitietijdfunctie bij transitie-opaciteit kunnen we de snelheidscurve van een element bepalen die het snelle opaciteitseffect op een afbeelding specificeert. Op deze manier gebruiken we het overgangsopaciteitseffect om veranderingen in de opgegeven tijdsperiode weer te geven in plaats van dat ze onmiddellijk plaatsvinden.
Voorbeeld 2: In dit voorbeeld gaan we de eigenschap van de overgangsdekking gebruiken die het dekkingseffect binnen een bepaalde tijdsduur weergeeft in plaats van onmiddellijk.
Bestand1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Uitvoer
snel sorteren
