Ondersteuning Volgende » CSS / opmaak vragen Volgende » Alpha kleur niet zichtbaar in Microsoft Edge

  • Opgelost Tony-1970

    (@tony-1970)


    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)
  • 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.

    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

    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 1 week, 2 dagen geleden door  ruurddewind.nl.

    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 1 week, 2 dagen geleden door  Tony-1970.

    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;

    Ik begrijp het.
    Bedankt.

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