Opacity - Versionshistorik

PGJ: /* Exempel */

2019-01-30T13:51:28Z

Exempel

← Äldre version		Versionen från 30 januari 2019 kl. 13.51
Rad 23:		Rad 23:
	== Exempel ==		== Exempel ==
	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.		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 pen="ZGdabE" height="300" tab="css,result">
	</codepen>		</codepen>
	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.

PGJ: /* Egenskaper */

2015-08-21T11:38:30Z

Egenskaper

← Äldre version		Versionen från 21 augusti 2015 kl. 11.38
Rad 19:		Rad 19:
	\| Alla element		\| Alla element
	\|}		\|}
	~~Alfavärdet~~ kan vara mellan <code>0.0</code> och <code>1.0</code>. Högre eller lägre värden, sätts till närmaste gräns.		[[Alfavärde]]t kan vara mellan <code>0.0</code> och <code>1.0</code>. Högre eller lägre värden, sätts till närmaste gräns.

	== Exempel ==		== Exempel ==

PGJ: /* Egenskapens definition i CSS Color Module Level 3 */

2015-08-21T11:37:55Z

Egenskapens definition i CSS Color Module Level 3

← Äldre version		Versionen från 21 augusti 2015 kl. 11.37
Rad 27:		Rad 27:
	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~~ ==		== Egenskapens definition ==
	http://www.w3.org/TR/css3-color/#transparency		http://www.w3.org/TR/css3-color/#transparency

PGJ den 21 augusti 2015 kl. 11.14

2015-08-21T11:14:32Z

← Äldre version		Versionen från 21 augusti 2015 kl. 11.14
Rad 1:		Rad 1:
	<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~~.		<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]]. 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.

	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 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 visas som det skulle ha ett alfavärde på <code>0.25</code> (hälften av hälften alltså), dvs det blir ännu mer transparent.		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 visas som det skulle ha ett alfavärde på <code>0.25</code> (hälften av hälften alltså), dvs det blir ännu mer transparent.

PGJ: /* Egenskaper */

2015-08-20T21:27:48Z

Egenskaper

← Äldre version		Versionen från 20 augusti 2015 kl. 21.27
Rad 21:		Rad 21:
	\| Alla element		\| Alla element
	\|}		\|}
			Alfavärdet kan vara mellan <code>0.0</code> och <code>1.0</code>. Högre eller lägre värden, sätts till närmaste gräns.

	== Exempel ==		== Exempel ==

PGJ den 20 augusti 2015 kl. 21.23

2015-08-20T21:23:58Z

← Äldre version		Versionen från 20 augusti 2015 kl. 21.23
Rad 4:		Rad 4:

	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 visas som det skulle ha ett alfavärde på <code>0.25</code> (hälften av hälften alltså), dvs det blir ännu mer transparent.		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 visas som det skulle ha ett alfavärde på <code>0.25</code> (hälften av hälften alltså), dvs det blir ännu mer transparent.
			== Egenskaper ==
	{\| class="wikitable"		{\| class="wikitable"
	\| Parametrar		\| Parametrar
	\| ~~Alfavärde~~ \| <code>inherit</code>		\| <''alfavärde''> \| <code>inherit</code>
	\|-		\|-
	\| Defaultvärde		\| Defaultvärde

PGJ den 20 augusti 2015 kl. 21.23

2015-08-20T21:23:17Z

← Äldre version		Versionen från 20 augusti 2015 kl. 21.23
Rad 7:		Rad 7:
	{\| class="wikitable"		{\| class="wikitable"
	\| Parametrar		\| Parametrar
	\| Alfavärde &~~bar~~; <code>inherit</code>		\| Alfavärde \| <code>inherit</code>
	\|-		\|-
	\| Defaultvärde		\| Defaultvärde

PGJ den 20 augusti 2015 kl. 21.22

2015-08-20T21:22:15Z

← Äldre version		Versionen från 20 augusti 2015 kl. 21.22
Rad 7:		Rad 7:
	{\| class="wikitable"		{\| class="wikitable"
	\| Parametrar		\| Parametrar
	\| Alfavärde \| <code>inherit</code>		\| Alfavärde &bar; <code>inherit</code>
	\|-		\|-
	\| Defaultvärde		\| Defaultvärde

PGJ den 20 augusti 2015 kl. 21.21

2015-08-20T21:21:56Z

← Äldre version		Versionen från 20 augusti 2015 kl. 21.21
Rad 7:		Rad 7:
	{\| class="wikitable"		{\| class="wikitable"
	\| Parametrar		\| Parametrar
	\| Alfavärde		\| Alfavärde \| <code>inherit</code>
	\|-		\|-
	\| Defaultvärde		\| Defaultvärde

PGJ den 20 augusti 2015 kl. 21.20

2015-08-20T21:20:46Z

← Äldre version		Versionen från 20 augusti 2015 kl. 21.20
Rad 3:		Rad 3:
	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.		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 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.		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 visas som det skulle ha ett alfavärde på <code>0.25</code> (hälften av hälften alltså), dvs det blir ännu mer transparent.

	{\| class="wikitable"		{\| class="wikitable"