Opacity: Skillnad mellan sidversioner

Versionen från 20 augusti 2015 kl. 23.17

opacity används för att ange hur transparent/genomskinligt innehållet i ett element ska vara. Som parameter anges ett alfavärde, dvs hur genomskinligt innehållet ska vara.

Alfavärdet kan vara ifrån 0.0 till 1.0, där noll är helt transparent (dvs, elementet blir osynligt) och ett är helt synlig/ogenomskinlig. Följaktligen är 0.5 det samma som att innehållet ska vara halvgenomskinligt.

Lägg märke till att allt innehåll i ett opacity-element kommer att påverkas av alfavärdet. Det går inte att undanta något underliggande innehåll och göra det mindre transparent än övrigt innehåll. Så sätter man opacity: 1 på ett underliggande element, kommer det inte att bli ogenomskinligt. Däremot kan man sätta ner genomskinligheten ytterligare i underelement. Låt oss säga att toppelementet har opacity: 0.5; och ett underelement även det har opacity: 0.5;. Då kommer underelementet att få ett alfavärde på 0.25 (hälften av hälften alltså), dvs det blir ännu mer transparent.

Parametrar	Alfavärde
Defaultvärde	1.0, dvs helt ogenomskinlig
Ärvs	Nej
Animerbart	Ja

Exempel

I exemplet gör vi header-elementet halvgenomskinligt. Lägg märke till att allt innehåll i elementet, inklusive alla underelement, får samma transparens. Det andra stycket i demon har ytterligare transparens.


	       		 
			See the Pen
			ZGdabE
			by Patrik Grip-Jansson (@PGJ)
			on CodePen.

Vill man t.ex. ha enbart bakgrunden halvgenomskinlig (men inte övrigt innehåll) är det antagligen bättre att använda sig av background-color och sätta en bakgrundsfärg med ett alfavärde. Se färger för mer information om detta.

Egenskapens definition i CSS Color Module Level 3

http://www.w3.org/TR/css3-color/#transparency

@@ Rad 1: / Rad 1: @@
-<code>[[opacity]]</code> används för att ange hur genomskinligt innehållet i ett element ska vara. Som parameter anges ett [[alfavärde]], dvs hur genomskinligt innehållet ska vara.
+<code>[[opacity]]</code> används för att ange hur transparent/genomskinligt innehållet i ett element ska vara. Som parameter anges ett [[alfavärde]], dvs hur genomskinligt innehållet ska vara.
-Alfavärdet kan vara ifrån <code>0.0</code> till <code>1.0</code>, där noll är helt genomskinlig (dvs, elementet blir osynligt) och ett inte är helt ogenomskinlig. Följdaktligen är <code>0.5</code> det samma som att innehållet ska vara halvgenomskinligt.
+Alfavärdet kan vara ifrån <code>0.0</code> till <code>1.0</code>, där noll är helt transparent (dvs, elementet blir osynligt) och ett är helt synlig/ogenomskinlig. Följaktligen är <code>0.5</code> det samma som att innehållet ska vara halvgenomskinligt.
-Lägg märke till att allt innehåll kommer att bli genomskinligt. Det går inte att undanta något underliggande innehåll ifrån <code>opacity</code>, t.ex. för att göra det ogenomskinligt. Så sätter man <code>opacity: 1</code> på ett underliggande element, kommer inte det att bli ogenomskinligt. Däremot kan man sätta ner genomskinligheten ytterligare i underelement. Låt oss säga att toppelementet har <code>opacity: 0.5;</code> och ett underelement även det har <code>opacity: 0.5;</code>, då kommer underelementet att få ett alfavärde på <code>0.25</code> (hälften av hälften alltså).
+Lägg märke till att ''allt'' innehåll i ett <code>opacity</code>-element kommer att påverkas av alfavärdet. Det går inte att undanta något underliggande innehåll och göra det mindre transparent än övrigt innehåll. Så sätter man <code>opacity: 1</code> på ett underliggande element, kommer det inte att bli ogenomskinligt. Däremot kan man sätta ner genomskinligheten ytterligare i underelement. Låt oss säga att toppelementet har <code>opacity: 0.5;</code> och ett underelement även det har <code>opacity: 0.5;</code>. Då kommer underelementet att få ett alfavärde på <code>0.25</code> (hälften av hälften alltså), dvs det blir ännu mer transparent.
-Defaultvärdet är <code>1</code>, dvs ogenomskinlig.
+{| class="wikitable"
+| Parametrar
+| Alfavärde
+|-
+| Defaultvärde
+| 1.0, dvs helt ogenomskinlig
+|-
+| Ärvs
+| Nej
+|-
+| Animerbart
+| Ja
+|}
 == Exempel ==
-Här gör vi ett element halvgenomskinligt.
+I exemplet gör vi <code>header<code>-elementet halvgenomskinligt. Lägg märke till att ''allt'' innehåll i elementet, inklusive alla underelement, får samma transparens. Det andra stycket i demon har ytterligare transparens.
 <codepen pen="ZGdabE" height="250" tab="css">
 </codepen>
-Lägg märke till att ''allt'' innehåll i elementet, inklusive alla underelement, får samma genomskinlighet. Vill man t.ex. ha enbart bakgrunden halvgenomskinlig (men inte övrigt innehåll) är det antagligen bättre att använda sig av <code>[[background-color]]</code> och sätta en bakgrundsfärg med ett alfavärde. Se [[färger]] för mer information om detta.
+Vill man t.ex. ha enbart bakgrunden halvgenomskinlig (men inte övrigt innehåll) är det antagligen bättre att använda sig av <code>[[background-color]]</code> och sätta en bakgrundsfärg med ett alfavärde. Se [[färger]] för mer information om detta.
 == Egenskapens definition i CSS Color Module Level 3 ==
 http://www.w3.org/TR/css3-color/#transparency