Opacitet i CSS är en egenskap som anger att kontrollera genomskinligheten av element som t.ex innehåll eller bilder . Med den här egenskapen kan vi ställa in alla bilder så att de är helt ogenomskinliga ( synlig ), helt transparent ( dold ), eller genomskinlig (delvis synlig). Det tar ett numeriskt värde mellan 0 och 1. Där 0 definierar helt transparent och 1 definierar helt synlig. Opacitetsvärden mellan 0 och 1, såsom 0,2, 0,4, 0,6, etc., ändrar en bild från transparent till ogenomskinlig genom att gradvis öka decimalvärdet.
Syntax
opacity :
Det numeriska värdet måste vara mellan 0 och 1 för att göra bilden halvtransparent. Om vi tillhandahåller 1 blir bilden ogenomskinlig, om det numeriska värdet är 0 blir bilden helt transparent.
stack java
Exempel 1 : I det här exemplet kommer vi att använda egenskapen opacity för att göra elementet transparent när du flyttar musen över elementet.
Main.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. Produktion
För musen över den röda rutan för att visa en genomskinlig eller opacitetseffekt.
gimp rektangel rita
Transition Opacitet i CSS
I CSS, a övergångsopacitet är en egenskap som används för att smidigt ändra opacitetstillståndet från en nivå till ett annat tillstånd. Det betyder att övergångsopaciteten ändrar det opaka elementets tillstånd till transparent med en definierad tidslängd. Övergången har fyra egenskaper: transition-property, transition-duration, transition-timing-function och transition-delay, som används för att utföra opacitetseffekten på en bild. De Övergångsperiod är en viktig egenskap för gradvisa förändringar eller plötsliga förändringar som återspeglar opacitetseffekten på ett element under en definierad tidslängd i millisekunder eller sekunder.
Stenografi-egenskapen för övergång är som följer:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntax för att definiera övergångsopaciteten i CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Övergångsfastighet
Följande är övergångsegenskaperna som används för att kontrollera övergångseffekterna.
| Värde | Beskrivning |
|---|---|
| Övergångs- egendom | Den används för att definiera namnet på CSS-egenskapen som visar övergångseffekten till bilder. |
| Övergångsperiod | Den används för att definiera tidsperioden i sekunder eller millisekunder för att visa övergångseffekten. |
| Övergång-timing-funktion | Den används för att definiera hastighetskurvan på en bild för att visa övergångseffekten. |
| Övergång- fördröjning | Anger om övergångseffekten initieras på elementet eller bilden. |
Obs: När vi ställer in övergångsegenskapen till bilden eller innehållet måste vi definiera egenskapen transition-duration; annars blir varaktigheten 0 och den kommer inte att visa någon effekt.
Behovet av övergångsopacitet i CSS
De opacitet är en enkel CSS-egenskap som används för att kontrollera genomskinligheten i en bild genom att ställa in opacitetsintervallet från 0 till 1. Den återspeglar den statiska eller plötsliga förändringen på ett element för att visa opacitetseffekten. Om vi till exempel vill visa en bild som transparent måste vi ställa in opacitetsvärdet från 0 till 1. Därefter visar det opacitetseffekten direkt istället för att ta lite tid. Därför använder vi en övergångsopacitet i CSS som kontrollerar ett elements transparens under en definierad tidsperiod. Genom att använda övergångstid-funktionen i övergångsopacitet kan vi bestämma hastighetskurvan för ett element som anger den snabba opacitetseffekten på en bild. På så sätt använder vi övergångsopacitetseffekten för att reflektera förändringar i den angivna tidsperioden istället för att inträffa omedelbart.
Exempel 2: I det här exemplet kommer vi att använda egenskapen transition opacitet som återspeglar opacitetseffekten under en angiven tidslängd istället för omedelbart.
Fil1.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> Produktion
släng in java undantagshantering
