Alpha kleur niet zichtbaar in Microsoft Edge

Opgelost tony-1970
(@tony-1970)

6 jaren, 4 maanden geleden
Hallo,

Op ons intranet gebruik ik Twenty Seventeen thema.
Als extra css heb ik de volgende code toegevoegd zodat de zijbalken doorzichtig worden en de achtergrondfoto zichtbaar is.
```
/*Change main background color*/
.site-content-contain {
    background-color: #7777;
}

/*Remove top padding so main background color doesn't show above the content*/
div#content {
    padding-top: 0;
}

/*Set content background color, add a bit of spacing*/
#content .wrap {
    background: white;
    padding-top: 30px;
}
```
De achtergrondkleur #7777; werkt wel bij CHrome, maar niet bij Microsoft Edge of Internet Explorer. Hoe kan ik dit doorzichtig resultaat toch voor elkaar krijgen?

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)

Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden

Sowieso is het hex getal 4 cijfers wat normaal gesproken 6 zijn (of 3 als t dezelfde getallen zijn). Daarnaast is het raadzaam een alpha channel te gebruiken, dit werkt overigens alleen met RGB waarden. Voorbeeld:

.background-color: rgba(0,0,0,.4);

Je creëert hiermee een zwarte achtergrond met 60% transparantie.

Thread starter tony-1970
(@tony-1970)

6 jaren, 4 maanden geleden

Bedankt Ruurd voor je reactie.
Ik was vooral benieuwd of iemand hier al ervaring mee had.
Ik kwam er toevallig achter dat je in Chrome blijkbaar 4 getallen kunt gebruiken waarbij de eerste drie de kleur vertegenwoordigen en het vierde de alpha waarde.

Dus .background-color: rgba(0,0,0,.4); is in Chrome te noteren al #0004;
Was benieuwd waarom Chrome hier wel mee overweg kan en andere browsers niet.
Het werkt bij elke willekeurige combinatie van vier cijfers (in Chrome).
Tony
Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden
Incorrect. Kleurwaarde #0004 is wezenlijk wat anders dan de notatie in RGB. RGB zijn de drie primaire kleuren waar digitale kleuren uit zijn opgebouwd. De notatie rgba(0,0,0,.4) is eigenlijk niks anders dan rgba(red,green,blue,alpha).

Voorbeeld:

color: #e60a1e;

is hetzelfde als:

color: rgb(230,10,30); /* zonder alpha waarde, oftewel transparantie */

en als je dezelfde kleur transparant wilt hebben, dus b.v. 20% zichtbaarheid en 80% transparantie:

color: rgba(230,10,30,.2); /* .2 is verkorte wijze -> 0.2 */
- Deze reactie is gewijzigd 6 jaren, 4 maanden geleden door Ruurd de Wind.
Thread starter tony-1970
(@tony-1970)

6 jaren, 4 maanden geleden
Ben het met u eens, maar blijkbaar doet Chrome er toch iets mee.
Ik gebruik ook de rgba schrijfwijze, omdat die in elke browser dezelfde kleur weergeeft.
Voor de lol zou u eens bovenstaande code in twenty seventeen thema moeten toepassen binnen Chrome om te zien wat ik bedoel.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color#Browser_compatibility
- Deze reactie is gewijzigd 6 jaren, 4 maanden geleden door tony-1970.
Ruurd de Wind
(@geoclaps)

6 jaren, 4 maanden geleden

Ik schreef eerder:

Sowieso is het hex getal 4 cijfers wat normaal gesproken 6 zijn (of 3 als t dezelfde getallen zijn)

Het gebruik van 4 getallen in een hex code is sowieso niet best practice. Gebruik bij specifieke kleuren altijd de zescijferige hex code. Bij 100% zwart of wit of andere egale kleur waarvan de hex waarde alle 6 karakters hetzelfde is kun je verkocht schrijven als 3 karakters.

Voorbeeld:

background-color: #777777;

is dus valide en hetzelfde als:

background-color: #777;

Thread starter tony-1970
(@tony-1970)

6 jaren, 4 maanden geleden

Ik begrijp het.
Bedankt.

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)

Het onderwerp ‘Alpha kleur niet zichtbaar in Microsoft Edge’ is gesloten voor nieuwe reacties.

Alpha kleur niet zichtbaar in Microsoft Edge

Onderwerptags

Weergaven