Opacity: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) |
||
| (4 mellanliggande sidversioner av samma användare visas inte) | |||
| 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]] | <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. | ||
| Rad 21: | Rad 19: | ||
| Alla element | | Alla element | ||
|} | |} | ||
[[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 == | ||
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=" | <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. | ||
== Egenskapens definition | == Egenskapens definition == | ||
http://www.w3.org/TR/css3-color/#transparency | http://www.w3.org/TR/css3-color/#transparency | ||
Nuvarande version från 30 januari 2019 kl. 13.51
opacity 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 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 visas som det skulle ha ett alfavärde på 0.25 (hälften av hälften alltså), dvs det blir ännu mer transparent.
Egenskaper
| Parametrar | <alfavärde> | inherit
|
| Defaultvärde | 1.0, dvs helt ogenomskinlig |
| Ärvs? | Nej |
| Animerbart? | Ja |
| Fungerar med... | Alla element |
Alfavärdet kan vara mellan 0.0 och 1.0. Högre eller lägre värden, sätts till närmaste gräns.
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.
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.