Hoe transparantie in css in te stellen - transparant blok. CSS-dekkingseigenschap: transparantie regelen

Hoe stel ik transparante kleuren in CSS in? Momenteel zijn er 3 manieren om dit te doen.

Methode 1 - transparante waarde

Als u de waarde van de tekst- of achtergrondkleur instelt op transparant , zal de kleur volledig transparant zijn, dat wil zeggen onzichtbaar. Voorbeeld:

Kleur: transparant;

Dergelijke tekst is niet zichtbaar op de pagina.

Methode 2 - RGBA-kleurmodus

En dit is een CSS3-innovatie. Voorheen bestond een dergelijke modus niet bij webontwikkeling, er was alleen RGB. Je weet vast wel hoe je kleur in dit formaat moet opnemen. Om dit te doen, moet u tussen haakjes drie waarden opgeven van 0 tot 255, die de verzadiging van een van de drie primaire kleuren (rood, groen, blauw) aangeven. Bijvoorbeeld:

Achtergrond: rgb(230, 121, 156);

Het rgba-formaat is niet anders, het voegt alleen een vierde waarde toe: de mate van transparantie van het element van 0 tot 1. Over het algemeen wordt dit opnameformaat voornamelijk gebruikt om een ​​doorschijnende kleur in te stellen, in plaats van volledig transparant. Om volledige transparantie te bereiken, hoeft u alleen maar 0 als vierde waarde te schrijven.

Achtergrond: rgba(0, 0, 0, 0);

In dit geval spelen de overige 3 cijfers geen speciale rol.

Er kan een doorschijnende kleur worden ingesteld als de vierde parameter is ingesteld op een waarde tussen 0,01 en 0,99. Ik heb al iets geschreven over het instellen van de doorschijnendheid van de achtergrond in , je kunt het lezen als je geïnteresseerd bent.

Methode 3 - dekking

Nog een eigenschap van CSS3-technologie. Maar ik wil je meteen waarschuwen dat het iets anders werkt. Dekking bepaalt de transparantie van het hele blok waarop het wordt toegepast. De leesbaarheid van de tekst en de perceptie van afbeeldingen gaan dus achteruit. Ik zie dus het nut in van het gebruik van deze eigenschap alleen voor blokken die geen tekst of andere informatie bevatten. Waarden kunnen worden ingesteld van 0 tot 1, zoals het geval is bij de vierde parameter bij het opgeven van een kleur in rgba-formaat.

Over het algemeen zijn dit op dit moment alle manieren die ik ken om een ​​transparante kleur in CSS in te stellen. Waarom dit nodig is, is een andere vraag. Door een transparante achtergrond is te zien wat eronder zit. Soms moet het op deze manier worden gedaan door het ontwerp. Over het algemeen is de doorschijnendheidstechniek tegenwoordig heel gebruikelijk.

Transparante achtergrond

Zoals u wellicht weet, is achtergrond een CSS-eigenschap waarmee u een achtergrondkleur kunt instellen of een afbeelding kunt laden die als achtergrond dient.

Stel transparantie in voor CSS-achtergrond

Dit alles gebeurt dus heel eenvoudig dankzij een kleurenopnameformaat zoals RGB. Als je met grafische editors werkt, weet je waarschijnlijk dat de rgb-kleurmodus staat voor: het aandeel rood (rood), het aandeel groen (groen) en blauw (blauw). Rgba is dus vrijwel hetzelfde, er is nog maar één parameter toegevoegd: transparantie. Het is als volgt geschreven:

Achtergrondkleur: rgba (173, 57, 22, 0,5)

Eerst geven we expliciet aan dat we de kleur in rgba-modus zetten. Vervolgens geven we de verzadigingswaarden van de drie primaire kleuren aan van 0 tot en met 255, waarbij 255 de hoogste verzadiging is. De vierde parameter is onze transparantie. De waarde van 0 tot één wordt hier geschreven. 1 is een volledig ondoorzichtig element en 0 is een volledig transparant element. Als u deze dus op 0 instelt, is de achtergrondkleur helemaal niet zichtbaar.

Nu weet u hoe u de achtergrondeigenschap in CSS op transparantie kunt instellen. Om dit te doen, moet u de rgba-kleurmodus gebruiken. Er is ook een dekkingseigenschap, maar deze geldt voor het gehele element als geheel. Dat wil zeggen dat bij het toepassen van dekking transparantie op de tekst kan worden toegepast, waardoor deze onleesbaar wordt.

Voorbeeld van een transparante achtergrond

De voordelen van een doorschijnende achtergrond zijn eenvoudig te laten zien met een voorbeeld. We hebben bijvoorbeeld een algemene pagina-achtergrond. Zo zou het blok eruit zien als het een effen zwarte kleur zou krijgen:

Laten we nu dezelfde zwarte kleur instellen op het blok, maar specificeer deze met behulp van het rgba-kleurformaat, waarbij de laatste waarde bijvoorbeeld 0,7 is. Het zal zo blijken:

Nu is de achtergrond van het blok erdoorheen zichtbaar en de achtergrondafbeelding erdoorheen. Deze afbeelding en achtergrond zijn slechts als voorbeeld. Zoals u zich kunt voorstellen, kan achtergrondtransparantie in CSS van pas komen als u wilt dat de achtergrond van een genest element zichtbaar is zonder andere achtergronden op andere lagen te verdoezelen.

De kleur zelf instellen met rgba is niet moeilijk. Zoals reeds vermeld betekenen de eerste drie letters de drie primaire kleuren: rood, groen en blauw, of beter gezegd hun aandeel (van 0 tot 255). Door verschillende waarden in te stellen, kunt u miljoenen verschillende kleuren verkrijgen, en dankzij de doorschijnendheid kunt u indien nodig veel mooiere effecten voor de site bedenken.

CSS-transparantie - cross-browser oplossing - 3,8 uit 5 op basis van 6 stemmen

In deze les zullen we kijken naar CSS-transparantie, leren hoe we transparantie kunnen geven aan verschillende pagina-elementen en volledige compatibiliteit tussen browsers kunnen bereiken, d.w.z. dit effect werkt hetzelfde in verschillende browsers.

Hoe u de transparantie van elk element instelt

In CSS3 is de eigenschap Opacity verantwoordelijk voor het maken van transparante elementen, die op elk element kunnen worden toegepast. Deze eigenschap heeft waarden van 0 tot 1, die de mate van transparantie bepalen. Waarbij 0 volledige transparantie is (de standaardwaarde voor alle elementen) en 1 volledige dekking is. Waarden worden geschreven als breuken: 0,1, 0,2, 0,3, etc.

Gebruiksvoorbeeld:

Transparantie tussen browsers

Niet alle browsers nemen de bovenstaande opaciteitseigenschap op dezelfde manier waar en implementeren deze. In sommige gevallen is het nodig om een ​​andere eigenschapsnaam of filters te gebruiken.

De CSS3-dekkingseigenschap wordt ondersteund door de volgende typen browsers: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Zo goed :) een browser zoals Internet Explorer tot en met versie 9.0 ondersteunt de opacity-eigenschap niet en om transparantie voor deze browser te creëren moet je de filter-eigenschap en de waarde alpha(Opacity=X) gebruiken, waarin X een geheel getal is in het bereik van 0 tot 100, dat het transparantieniveau bepaalt. 0 is volledig transparant en 100 is volledig ondoorzichtig.

Vanaf Firefox vóór versie 3.5 ondersteunt het de eigenschap -moz-opacity in plaats van opacity.

Browsers zoals Safari 1.1 en Konqueror 3.1, gebouwd op de KHTML-engine, gebruiken de eigenschap -khtml-opacity om de transparantie te regelen.

Hoe kun je de transparantie in CSS instellen, zodat het er in alle browsers hetzelfde uitziet? Om een ​​cross-browser oplossing voor elementtransparantie te creëren, moeten ze niet alleen één opacity-eigenschap specificeren, maar ook de volgende set eigenschappen:

filter: alpha(dekking=50); /* Transparantie voor IE */ -moz-opacity: 0,5; /* Ondersteunt Mozilla 3.5 en lager */ -khtml-opacity: 0.5; /* Ondersteunt Konqueror 3.1 en Safari 1.1 */ dekking: 0,5; /* Ondersteunt alle andere browsers */

Transparantie van verschillende elementen

Laten we eens kijken naar enkele voorbeelden van het instellen van transparantie op bepaalde elementen die het vaakst op de pagina worden gebruikt.

Transparantie van CSS-afbeeldingen.

Laten we eens kijken naar verschillende opties voor het maken van een doorschijnende afbeelding. In het volgende voorbeeld heeft de eerste afbeelding geen transparantie, de tweede een transparantie van 50% en de derde 30%.

Resultaat:

Transparantie in CSS bij het bewegen over een afbeelding.

Vaak is het nodig om een ​​afbeelding of een ander element transparant te maken op het moment dat de cursor erboven zweeft. U kunt dit doen met behulp van de CSS pseudo-class:hover. Om dit te doen, moeten aan onze afbeelding twee klassen worden toegewezen, één normaal - dit is de inactieve status van de afbeelding en de tweede klasse met de pseudo-klasse: hover, hier moet u de transparantie van de afbeelding op dit moment specificeren van het bewegen van de cursor.

Het resultaat zie je in de demo.

Achtergrondtransparantie met behulp van CSS.

Hier is het noodzakelijk om te onthouden dat transparantie van toepassing is op alle geneste elementen en dat ze geen grotere transparantie kunnen hebben dan het geneste element.

Als voorbeeld geven we een variant met een pagina-achtergrond gemaakt met behulp van een afbeelding en een blok met een achtergrond gemaakt met kleur en met een transparantie van 50%.

Voorbeeldcode:

Hier is het resultaat van de hierboven geposte code:

Een transparante achtergrond creëren in HTML en CSS (dekking en RGBA-effecten)

Doorschijnend effect element is duidelijk zichtbaar in de achtergrondafbeelding en is wijdverspreid geworden in verschillende besturingssystemen omdat het er stijlvol en mooi uitziet. Het belangrijkste is om geen monochromatisch patroon onder de doorschijnende blokken te hebben, maar een afbeelding; in dit geval wordt transparantie merkbaar.

Dit effect wordt op verschillende manieren bereikt, waaronder ouderwetse methoden zoals het gebruik van een PNG-afbeelding als achtergrond, het maken van een geruite afbeelding en de eigenschap Opacity. Maar zodra de behoefte ontstaat om een ​​doorschijnende achtergrond in een blok te maken, hebben deze methoden onaangename nadelen.

Laten we eens kijken naar de doorschijnendheid van tekst en achtergrond - hoe we deze correct kunnen gebruiken bij het ontwerpen van websites:

Het belangrijkste kenmerk van deze eigenschap is dat de transparantiewaarde alle onderliggende elementen beïnvloedt, en niet alleen de achtergrond. Dit betekent dat zowel de achtergrond als de tekst doorschijnend worden. U kunt het transparantieniveau verhogen door de dekkingsopdracht te wijzigen van 0,1 in 1.

HTML 5 CSS 3 IE 9

Bij webdesign wordt ook gedeeltelijke transparantie gebruikt en deze wordt bereikt door het RGBA-kleurformaat, dat alleen voor de achtergrond van het element wordt ingesteld.

Normaal gesproken moet in een ontwerp alleen de achtergrond van het element doorschijnend zijn en moet de tekst ondoorzichtig zijn om de leesbaarheid te behouden. De eigenschap opacity is hier niet geschikt omdat de tekst in het element ook gedeeltelijk transparant zal zijn. Het is het beste om het RGBA-formaat te gebruiken, dat een alfakanaal heeft, of met andere woorden, een transparantiewaarde als onderdeel ervan. De waarde wordt rgba geschreven, waarna de waarden van de rode, blauwe en groene kleurcomponenten tussen haakjes worden vermeld, gescheiden door komma's. De laatste is transparantie, die is ingesteld van 0 tot 1, waarbij 0 volledige transparantie betekent, en 1 kleurdekking - de syntaxis voor het gebruik van rgba.

Doorschijnende achtergrond HTML 5 CSS 3 IE 9

Bepaalt het transparantieniveau van een webpagina-element. Wanneer het element gedeeltelijk of volledig transparant is, zijn de achtergrondafbeelding of andere elementen onder het doorschijnende object zichtbaar.

Korte informatie

Benamingen

Waarden

De waarde is een getal uit het bereik. Een waarde van 0 komt overeen met volledige transparantie van het element, 1 daarentegen met de dekking ervan. Breukgetallen van de vorm 0,6 stellen de doorschijnendheid in. Het is toegestaan ​​om getallen te schrijven zonder voorloopnul, zoals dekking: .6.

Zandbak

Winnie de Poeh was altijd niet vies van een beetje verfrissing, vooral niet om elf uur 's ochtends, omdat het ontbijt toen al lang afgelopen was en de lunch nog niet was begonnen. En natuurlijk was hij ontzettend blij om te zien dat het Konijn kopjes en borden tevoorschijn haalde.

div (dekking: 1; )

Voorbeeld

Het resultaat van dit voorbeeld wordt getoond in Fig. 1.

Rijst. 1. Resultaat van het gebruik van dekking

Objectmodel

Voorwerp.stijl.dekking

Opmerking

Firefox vóór versie 3.5 ondersteunt de eigenschap -moz-opacity.

Internet Explorer tot versie 9.0 gebruikt filters om de transparantie te wijzigen; in deze browser moet u filter : alpha(opacity=50) schrijven, waarbij de parameter opacity een waarde van 0 tot 100 kan aannemen.

Specificatie

Elke specificatie doorloopt verschillende goedkeuringsfasen.

• Aanbeveling - De specificatie is goedgekeurd door het W3C en wordt aanbevolen als standaard.
• Aanbeveling van kandidaten ( Mogelijke aanbeveling) - de groep die verantwoordelijk is voor de standaard is ervan overtuigd dat deze aan de doelstellingen voldoet, maar heeft hulp nodig van de ontwikkelingsgemeenschap om de standaard te implementeren.
• Voorgestelde aanbeveling Voorgestelde aanbeveling) - in dit stadium wordt het document ter definitieve goedkeuring voorgelegd aan de W3C Adviesraad.
• Werkconcept - Een meer volwassen versie van een concept dat is besproken en aangepast voor beoordeling door de gemeenschap.
• Redactievoorstel ( Redactie ontwerp) - een conceptversie van de standaard nadat wijzigingen zijn aangebracht door de projectredacteuren.
• Voorlopige versie ( Conceptspecificatie) - de eerste conceptversie van de standaard.

Met de komst van CSS3 is het werk van lay-outontwerpers in veel opzichten eenvoudiger en logischer geworden: nu kun je immers elk object echt flexibel configureren, waarbij je steeds minder je toevlucht neemt tot JavaScript. Stel dat u de transparantie van de achtergrond moet aanpassen - CSS biedt meteen verschillende opties.

De achtergrond wordt gespecificeerd door een reeks attributen (achtergrondherhaling, achtergrondbijlage, achtergrondoorsprong, achtergrondclip, achtergrondkleur), en elk daarvan kan afzonderlijk worden gespecificeerd of gecombineerd onder het achtergrondattribuut. Laten we elk van hen in meer detail bekijken.

achtergrondkleur attribuut

Zelfs IE8 ondersteunt deze methode. Verschillende afbeeldingen worden gebruikt als achtergrond voor een flexibele lay-out. Het belangrijkste is dat u bij het gebruik van een afbeelding niet vergeet om ook de achtergrondkleur in CSS in te stellen, omdat gebruikers de afbeelding eenvoudigweg niet kunnen laden.

attribuut achtergrondpositie

Als u een afbeelding gebruikt om de achtergrond van een blok in te stellen, kunt u met CSS de afbeelding overal op het scherm plaatsen. Standaard bevindt de afbeelding zich in de linkerbovenhoek. Het attribuut accepteert verbale aanduidingen (boven, onder, links, rechts) of numerieke aanduidingen (percentages, pixels en andere meeteenheden). In dit geval moet u twee waarden opgeven: horizontaal en verticaal:

body (achtergrondpositie: rechts midden;) - in dit voorbeeld bevindt de achtergrond zich aan de rechterkant van de pagina en zijn de afstanden van de onderkant en bovenkant tot de afbeelding hetzelfde.

attribuut achtergrondgrootte

Soms moet u CSS gebruiken om de achtergrond uit te rekken of te verkleinen. Om dit te doen, gebruikt u het attribuut background-size. De achtergrondgrootte kan worden ingesteld in pixels of percentages, of in andere maateenheden.

Er zijn enkele problemen met dit attribuut: om de achtergrond correct weer te geven in eerdere versies van browsers, moeten voorvoegsels worden gebruikt. Uiteraard ondersteunen de huidige versies dit attribuut volledig en is de behoefte aan specifieke eigenschappen verdwenen.

attribuut achtergrondbijlage

Dit attribuut specificeert het gedrag van de achtergrondafbeelding tijdens het scrollen. Het kan dus 3 waarden aannemen (zonder rekening te houden met overerven, wat gemeenschappelijk is voor alle attributen die in dit artikel worden gepresenteerd):

• vast— maakt het beeld bewegingloos tegen de achtergrond;
• rol— de achtergrond scrollt samen met andere elementen;
• lokaal— de achtergrondafbeelding scrollt als de inhoud scrollt. Achtergrond die verder reikt dan de inhoud staat vast.

Gebruiksvoorbeeld:

body (achtergrondbevestiging vast).

Firefox ondersteunt momenteel de laatste eigenschap (lokaal) niet.

attribuut achtergrond-oorsprong

Dit attribuut is verantwoordelijk voor de positionering van het element. Vroege browsers vereisen voorvoegsels. De eigenschap zelf heeft drie parameters:

• opvuldoos positioneert de achtergrond ten opzichte van de rand, rekening houdend met de dikte van het frame;
• grensvak verschilt van de vorige eigenschap doordat de grenslijn de achtergrond geheel of gedeeltelijk kan overlappen;
• inhoud-box positioneert het beeld en koppelt het aan de inhoud.

Als er meerdere waarden worden opgegeven, kunnen browsers anders reageren: Firefox en Opera accepteren alleen de eerste optie.

achtergrondherhaling attribuut

Als de achtergrond door een afbeelding wordt gegeven, moet deze in de regel horizontaal of verticaal worden herhaald. Hiervoor wordt het attribuut background-repeat gebruikt. De achtergrond van een blok waarvan de CSS een dergelijke eigenschap bevat, kan dus een van de volgende parameters hebben:

• geen herhaling— de afbeelding verschijnt in één versie op de pagina;
• herhalen— de achtergrond wordt herhaald langs de x- en y-as;
• herhaal-x- alleen horizontaal;
• herhaal-y- alleen verticaal;
• ruimte— de achtergrond wordt herhaald, maar als de ruimte niet kan worden opgevuld, ontstaan ​​er gaten tussen de afbeeldingen;
• ronde— de afbeelding wordt geschaald als het niet mogelijk is om het hele gebied met hele afbeeldingen te vullen.

Voorbeeld van attribuutgebruik:

lichaam (achtergrondherhaling: herhaling zonder herhaling)- vergelijkbaar achtergrondherhaling: herhaal-y.

In CSS3 is het mogelijk om waarden in te stellen voor meerdere afbeeldingen als je de parameters opsomt, gescheiden door komma's.

attribuut achtergrondclip

Dit attribuut definieert het gedrag van de achtergrond onder randen (bijvoorbeeld in het geval van gestippelde randen):

• opvuldoos— de achtergrond wordt strikt binnen het blok weergegeven;
• grensvak- de afbeelding past in het frame;
• inhoud-box— de afbeelding op de achtergrond verschijnt alleen binnen de inhoud.

Gebruiksvoorbeeld:

body (achtergrondclip: inhoudsbox;).

Chrom en Safari vereisen het voorvoegsel -webkit-.

Dekkings- en filterattributen

Met het opacity-attribuut kunt u de transparantie van de achtergrond instellen - de CSS-eigenschap werkt in alle browsers. De waarde kan worden ingesteld van 0,0 tot en met 1,0. Tegelijkertijd kunt u de CSS-achtergrondtransparantie instellen zonder een geheel getal: in plaats van 0,3 schrijft u gewoon.3:

.block (achtergrondafbeelding: url(img.png); dekking: .3;).

Om de achtergrondtransparantie in te stellen, waarvan de CSS zelfs voor IE onder versie 9 werkt, gebruikt u het filterattribuut:

.block (achtergrondafbeelding: url(img.png); filter: alpha(opacity=30);).

In dit geval wordt de dekkingswaarde ingesteld in het bereik van 0 tot 100. Houd er rekening mee dat het opaciteitsattribuut door erfelijkheid verschilt van het instellen van transparantie met behulp van RGBA: bij gebruik van opaciteit wordt niet alleen de achtergrond transparant, maar ook alle elementen binnen het blok .

Controleer altijd de browsergebruiksstatistieken voor het GOS en alle andere landen. Het grootste probleem voor alle webontwerpers zijn de oude versies van IE die het volledige gebruik van CSS3 niet toestaan. Vergeet bij het coderen niet speciale services te gebruiken die controleren of uw browser CSS-eigenschappen ondersteunt. Als u geen oudere versies van browsers kunt installeren, zoek dan een service die de site online in verschillende browsers test.