Den här artikeln introducerar dig till koncept som hjälper dig att förstå opacitet i och berätta hur du styr denna parameter. Följande tips kommer att behandlas i den här artikeln,
- Opacitet i CSS
- Opacitet ärvt med kaskad element
- RGBA-attributinställning för kaskadelement
- Opacitet ändras på svävareffekten
Bakgrundens opacitet för ett element är en användbar inställning i HTML-design. Genom att ställa in nivån på opacitet (invers av transparens) kan en designer styra synligheten för elementet genom CSS-opacitetsegenskapen. Detta används vanligtvis som bakgrundsinställning när elementen placeras ovanför varandra.
Det vanligaste scenariot där denna funktion används är detta:
- En delvis transparent bakgrundsbild placeras bakom ett textelement.
- Bakgrundsbilden är farligt synlig, så den dominerar inte texten framför.
- Bilden kan komma i fullt fokus när användaren uttryckligen väljer att se den.
Du kanske vill läsa om innan du börjar lära dig mer om CSS-opacitet.
För en omfattande CSS-handledning, besök Edureka CSS-handledning för nybörjare . Du får ett utmärkt intryck på hur CSS ska användas för att utöka HTML-webbdesign.
Fortsätter med den här artikeln om opacitet i CSS
Opacitet i CSS
I CSS ställs opacitet in som ett numeriskt värde mellan 0,0 - 1,0. Värden närmare noll representerar mer transparens, bilden kommer att vara mycket lätt i synlighet. Låt oss börja med ett exempel på att en bild visas med 50% transparens. Se exempel 1 nedan.
Exempel 1: Bakgrundsbild inställd på halv genomskinlighet
hur man implementerar en hög
img {opacitet: 0,5 filter: alfa (opacitet = 50) / * För IE8 och tidigare * /} 
Exempel 1: Output
Originalbild (100% opacitet)
Bild med 50% inställning för opacitet
I exemplet ovan fanns det bara ett element - en bild. Andra element kan också ställas in med opacitetsparametern som text, div-element och så vidare.
Fortsätter med den här artikeln om opacitet i CSS
Opacitet ärvt med kaskad element
När element staplas över varandra, om bakgrundselementet har opacitetsinställningen, ärvs det av alla underordnade element. Det här är standardinställning . Det betyder att om en textruta placeras över en bild och bilden har 0,5 opacitetsinställning, så kommer både bild- och textelementet bara att vara delvis synligt.
Låt oss ta förekomsten av ett underordnat textelement placerat över TOM & JERRY-bilden i vårt nästa exempel. Vi kan se standardeffekten för opacitet i exempel 2.
.container {position: relativ textjustering: center ogenomskinlighet: 0,5} .centrerad {position: absolut topp: 50% kvar: 50% transform: översätt (-50%, -50%) färg: blå fontstorlek: 40 pixlar} } TOM & JERRYExempel 2: Text ärver opacitet från överordnad bild
Fortsätter med den här artikeln om opacitet i CSS
RGBA-attributinställning för kaskadelement
Det finns ett annat sätt på vilket opacitet kan kontrolleras med kaskadelement. Om du vill att det underordnade elementet ska förbli opåverkat av opaciteten hos dess bakgrundselement kan du använda RGBA-attributinställning .
Exempel 3: Använda RGBA-inställning
bakgrund: rgba (76, 175, 80, 1.0) / * Bilden har ingen opacitetsinställning * / / * Grön bakgrund för text med 100% opacitet * / / * Blå färgtext har 100% opacitet * /
bakgrund: rgba (76, 175, 80, 0.4) / * Bilden har ingen opacitetsinställning * / / * Grön bakgrund för text med 40% opacitet * / / * Blå text syns fortfarande med 100% opacitet * /
Efter RGB-färgkoden står attributet 'a' för alfa . De alfa parametern är ett tal mellan 0,0 (helt transparent) och 1,0 (helt ogenomskinligt).
Fortsätter med den här artikeln om opacitet i CSS
Opacitet ändras på svävareffekten
I vissa scenarier vill webbdesigners att opaciteten varierar beroende på om användaren är inriktad på elementet eller inte. Låt oss till exempel säga att en bild är inställd på 50% opacitet som standard. Men när användaren svävar över bilden, vill vi att bilden ska vara i full fokus med 100% opacitet.
Exempel 4 visar hur detta görs.
Vanliga punkter att notera:
konvertera decimal till binär python
- Opacitetsinställning är ett alternativ till att använda attributet 'synlighet' i CSS. Att använda opacitetsinställningen gör det dock lätt att ställa in olika grader av transparens, allt från noll till full.
- Graden av opacitet ska ställas in efter noggrann testning i olika webbläsare. När opacitet är inställt på låga värden kan texten eller bilden ibland bli helt osynlig eller oläslig.
- Tanken bakom användning av opacitet är att sätta skarpt fokus på vissa element medan andra bakgrundselement inte distraherar användarens uppmärksamhet. Så sådana bakgrundselement är inställda med lägre opacitet.
- I Internet Explorer, för IE8 och äldre versioner, är opacitetsegenskapen en 'filter' -inställning som sträcker sig från 1 till 100. I alla andra webbläsare varierar den från 0 till 1.
Detta leder oss till slutet av den här artikeln om Opacity In CSS.
Om du är intresserad av att lära dig mer om webbutveckling, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig hur du skapar imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuerar den till Amazon Simple Storage Service (S3).
Om du fortfarande är intresserad Om du har några frågor kan du lägga upp den i kommentarsektionen på denna 'Opacity In CSS' -blogg, så återkommer vi till dig så snart som möjligt.