CSS-dekkingseigenschap: regelt de transparantie. CSS-transparantie - cross-browser oplossing

De CSS-opacity-eigenschap is verantwoordelijk voor de transparantie van elementen (afbeeldingen, tekst, blokken) in html.

Syntaxis van CSS-dekking

Waar waarde reële waarden kan aannemen in het bereik van 0,0 tot 1,0. Een waarde van 1,0 betekent geen transparantie (standaard).

Voorbeeld nr. 1. Transparante afbeelding in html

De eerste afbeelding wordt zonder transparantie weergegeven, de tweede met transparantie 0,5

Doorschijnendheid van elementen

Maak de afbeelding doorschijnend wanneer u zweeft!

DemoDownload bronnen

Bedankt voor uw aandacht!

Volgend artikel
Hoe te creëren div blok met scrollen?

Gebruik de CSS-opacity-eigenschap om de transparantie van pagina-elementen te beheren. Volgens de specificatie is het van toepassing op elk type knooppunt en wordt het ondersteund in alle moderne browsers. Hiermee kun je creëren interessant ontwerp of implementeer een handige interactieve gebruikerservaring.

Mogelijke waarden

De syntaxis voor de eigenschap dekking in css ziet er als volgt uit:

Selector (dekking: 1; ) selector (dekking: 0; ) selector (dekking: 0,4; )

De invoer accepteert numerieke waarden in het bereik van 0 tot 1. De parameter kan fracties van één vertegenwoordigen, terwijl een punt wordt gebruikt als scheidingsteken voor de gehele en fractionele delen in CSS.

Een element zonder transparantie wordt onzichtbaar, maar blijft nog steeds zijn plaats op de pagina innemen en behoudt de mogelijkheid om met de gebruiker te communiceren.

Als de eigenschapswaarde niet nul is, wordt de werkelijke transparantie berekend als een percentage van een bepaalde bovengrens. In een normale situatie bepaalt dekking: 1 de volledige dekking van het element.

Transparantie van onderliggende knooppunten

Als het element echter een ouder heeft waarvan de transparantie anders is dan één, verandert de berekening. Een afstammeling kan niet ‘minder transparant’ zijn dan zijn voorouders. De waarde van de CSS-eigenschap voor dekking van het bovenliggende blok wordt de bovengrens voor de dekking van het onderliggende knooppunt.

Bovenliggend (dekking: 0,7; ) kind (dekking: 1; )

In een situatie als deze kind-element zal 30% transparant zijn, ook al is de dekkingswaarde één.

Voorbeelden van gebruik

Voorbeeld 1: Doorschijnendheid. Het is noodzakelijk dat de hoofdachtergrond van het blok zichtbaar is onder het doelelement.

Doel (achtergrond: zwart; dekking: 0,5; )

Niet alleen de achtergrond van het doelblok wordt doorschijnend, maar ook de tekst.

Voorbeeld 2. Dynamische controle transparantie. De waarde van de CSS-opacity-eigenschap van het doelblok verandert wanneer u erover beweegt.

Doel ( dekking: 0,2; ) .target:hover ( dekking: 1; )

Dynamische transparantie

Het laatste voorbeeld laat zien dat transparante elementen blijven reageren op paginagebeurtenissen zoals hover. Hierdoor kunt u javascript gebruiken om te controleren CSS-eigenschap dekking, en gebruik hiervoor ook overgangs- en animatiemechanismen soepele verandering weergavemodus.

Om toegang te krijgen tot transparantie vanuit een script, moet u toegang hebben tot het stijlobject van een specifiek element.

// de huidige dekkingswaarde ophalen var opacity = element.style.opacity; // een nieuwe waarde instellen element.style.opacity = 0,4;

Het soepel verdwijnen van een blok kan worden bereikt met behulp van de CSS-overgangseigenschap:

Element ( dekking: 0,1; overgang: dekking 1000 ms; ) element: hover ( dekking: 0,8; overgang: dekking 2000 ms; )

Nu verandert het elementknooppunt, wanneer u met de muis beweegt, binnen één seconde de transparantie van 10 naar 80%, en wanneer de cursor weggaat, wordt deze gedimd naar oorspronkelijke waarde binnen twee seconden.

Met de CSS-opacity-eigenschap in combinatie met het overgangsmechanisme kunt u creëren prachtige effecten.

Alfakanaal in plaats van dekking

De belangrijkste subtiliteiten van het dekkingsmechanisme in CSS:

• het effect ervan strekt zich niet alleen uit tot de achtergrond van het blok, maar ook tot de tekstinhoud ervan, die bij voorkeur duidelijk wordt gelaten;
• onderliggende elementen kunnen niet minder transparant zijn dan hun bovenliggende elementen.

Als deze effecten het leven van de lay-outontwerper ingewikkelder maken, moet u in plaats van dekking een eenvoudige transparante achtergrond gebruiken, waarbij u de waarde ervan definieert in RGBA-formaat of HSLA.

Vlad Merzjevitsj

Gedeeltelijke transparantie ziet er, indien correct gebruikt, zeer indrukwekkend uit bij het ontwerpen van websites. Het belangrijkste is dat onder doorschijnende blokken er was geen monochrome tekening, maar een afbeelding; in dit geval wordt de transparantie merkbaar. Dit effect wordt bereikt op verschillende manieren en als je alles onthoudt, inclusief ouderwetse methoden, dan is dit het nut PNG-afbeelding als achtergrond, waardoor een geruite afbeelding en de eigenschap dekking ontstaat. Maar zodra de noodzaak zich voordoet om een ​​​​doorschijnende achtergrond in een blok te maken, hebben deze methoden een onaangenaam effect achterkant. Ik zal het doen korte recensie om duidelijk te maken wat we bedoelen waar we het over hebben, maar ook voor lezers die niet bekend zijn met niet-traditionele opties voor het creëren van een doorschijnend effect.

PNG als achtergrond

IN grafische editor Een doorschijnend patroon in één kleur is vooraf voorbereid en opgeslagen in PNG-24-indeling (Fig. 1). Een speciaal kenmerk van dit formaat is dat het 256 transparantieniveaus ondersteunt, of simpel gezegd: het kan doorschijnende afbeeldingen weergeven.

Rijst. 1. Afbeelding om de achtergrond te maken

Vervolgens voegen we de afbeelding als achtergrond toe via de achtergrondeigenschap, zoals weergegeven in voorbeeld 1.

Voorbeeld 1: Gebruik van een doorschijnend patroon

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Resultaat dit voorbeeld getoond in afb. 3.

Rijst. 2. Een behang aanbrengen

De oudere Internet Explorer 6-browser werkt niet met doorschijnendheid in PNG-24. Als u om de een of andere reden deze browser moet ondersteunen, zult u er scripts voor moeten gebruiken.

De bovenstaande methode heeft een aantal beperkingen. Dus als u afbeeldingen in de browser uitschakelt, verdwijnt de achtergrond helemaal. Bovendien is het niet zo eenvoudig om de achtergrondkleur en transparantiewaarde te wijzigen; hiervoor moet u de afbeelding opnieuw bewerken.

Geruit beeld

Deze methode verwijst naar volledig oude methoden voor het implementeren van doorschijnendheid, toen browsers "niets konden doen" en het nodig was om naar niet-standaardoplossingen te zoeken. De truc is om een ​​afbeelding te maken die afwisselend transparante en ondoorzichtige pixels bevat (Afbeelding 3). Deze regelmatige structuur creëert een doorschijnend effect en imiteert dit in wezen.

Rijst. 3. Vergroot geruit patroon

Zo ziet het er uiteindelijk uit (Fig. 4).

Rijst. 4. Simuleer doorschijnendheid

De nadelen van deze methode zijn vergelijkbaar met de vorige; er kan ook een moiré-patroon verschijnen en de tekst zal verslechteren.

Dekkingseigenschap

De opaciteitseigenschap van CSS 3 specificeert de transparantiewaarde en varieert van 0 tot 1, waarbij nul de volledige transparantie van het element is, en één daarentegen ondoorzichtig is. De eigenschap Opacity heeft een speciaal kenmerk: de transparantie is van toepassing op alle onderliggende elementen en ze kunnen de dekkingswaarde van hun bovenliggende elementen niet overschrijden. Het blijkt dat er geen ondoorzichtige tekst op een doorschijnende achtergrond kan staan ​​(voorbeeld 2).

Voorbeeld 2: Dekking gebruiken

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Het magnetische veld, dat door de aard van het spectrum kon worden vastgesteld, volgt de kosmische meteoriet. Deze dag viel op de zesentwintigste dag van de maand Carney, die de Atheners Metagitnion noemen.

Het resultaat van het voorbeeld wordt getoond in Fig. 5.

Rijst. 5. Transparantie van tekst en achtergrond

In Internet Explorer-versies tot en met 8.0 werkt de dekking niet en wordt daarom de browserspecifieke filtereigenschap gebruikt. Dit resulteert uiteraard in ongeldige CSS-code.

RGBA

De moderne aanpak is veel eenvoudiger en visueler dan de bovenstaande methoden en bestaat uit het gebruik van het RGBA-formaat voor kleuren en achtergronden. De eerste drie letters zijn voor velen bekend en staan ​​voor rood, groen, blauw, de laatste symboliseert het alfakanaal en bepaalt de transparantie van het element. Het opnameformaat is als volgt.

achtergrondkleur: rgba(r, g, b, a);

Tussen haakjes wordt in plaats van letters de waarde van de kleurcomponent geplaatst; deze kan in elke grafische editor worden bekeken; de laatste waarde stelt de transparantie in en valt samen met de waarde van de dekkingseigenschap.

Niet alle browsers ondersteunen dit formaat: Internet Explorer sinds versie 9, Opera sinds versie 10, Firefox sinds 3, Safari sinds 3.2. Maar over het algemeen geven moderne browsers transparantie correct weer. Voor oudere versies van IE kunt u de kleur afzonderlijk opgeven in het gebruikelijke formaat, en er zal uiteraard geen transparantie zijn. Of gebruik opnieuw de eigenschap filter, maar dan zul je er rekening mee moeten houden dat transparantie ook invloed heeft op de tekst (voorbeeld 3). Om geldige CSS-code te behouden, heb ik voorwaardelijke opmerkingen gebruikt.

Voorbeeld 3: RGBA gebruiken

HTML5 CSS3 IE Cr Op Sa Fx

Een gigantische stellaire spiraal met een diameter van 50 kpc, dit werd vastgesteld door de aard van het spectrum, illustreert perfect de meteorenregen, maar Don Yemans nam slechts 82 grote kometen op in de lijst.

Het resultaat van het voorbeeld is te zien in Fig. 6.

Rijst. 6. Doorschijnende achtergrond met ondoorzichtige tekst

Vergelijk de afbeelding met de vorige, de letters zijn helderder en duidelijker geworden.

Er is een bug ontdekt in Internet Explorer 7 bij het combineren van achtergrondkleur met verschillende betekenissen. Als u de achtergrondkleur bijvoorbeeld op rood instelt, zoals hieronder weergegeven, zal de achtergrond helemaal niet verschijnen in IE7.

Div ( achtergrondkleur: rood; /* Niet van toepassing in IE7 */ achtergrondkleur: rgba(255, 0, 0, 0.5); )

Dit wordt opgelost door de eigenschap background-color te vervangen door background .

Div ( achtergrond: red; /* En dit werkt */ achtergrond: rgba(255, 0, 0, 0.5); ) Er is echter één voorbehoud. De CSS-validator klaagt over de achtergrond wanneer deze een waarde in RGBA-indeling krijgt. Maar tegelijkertijd verwijst het correct naar de achtergrondkleur. Over het algemeen moet u, zoals altijd, kiezen tussen browsers en geldigheid.

Vlad Merzjevitsj

Het doorschijnende effect van het element is duidelijk zichtbaar achtergrondafbeelding en werd wijdverspreid in verschillende besturingssystemen omdat het er stijlvol en mooi uitziet. Bij webdesign wordt ook doorschijnendheid gebruikt en wordt bereikt door de eigenschap of het formaat van de opaciteit RGBA-kleuren, die is ingesteld voor de achtergrond.

Verloopblok

Maak het blok zoals getoond in Fig. 1. Het blok bevat een doorschijnend verloopframe met verloop achtergrond onder de titel en een kleine index. De achtergrond op de pagina is uitsluitend bedoeld ter verduidelijking van het doorschijnendheidseffect; u kunt elke eigen afbeelding aangeven. De minimale blokhoogte is 100px.

Hoe maak je een laag semi-transparant?

Om de mate van transparantie van een element te wijzigen, gebruikt u de eigenschap Opacity Style met een waarde van 0 tot 1, waarbij 0 overeenkomt met volledige transparantie en 1 daarentegen met de dekking van het object. Deze eigenschap werkt niet in Internet Explorer, dus u moet er specifiek een filter voor gebruiken, een eigenschap die geen deel uitmaakt van de CSS-specificatie. Voorbeeld 1 laat zien hoe u de laagtransparantie voor alle browsers instelt.

Doorschijnende achtergrond

Vlad Merzjevitsj

Gedeeltelijke transparantie ziet er, indien correct gebruikt, zeer indrukwekkend uit bij het ontwerpen van websites. Het belangrijkste is dat er onder de doorschijnende blokken geen monochromatisch ontwerp is, maar een afbeelding; in dit geval wordt transparantie merkbaar. Dit effect wordt op veel manieren bereikt, en als je alles onthoudt, inclusief de ouderwetse methoden, wordt een PNG-afbeelding als achtergrond gebruikt, waardoor een geruite afbeelding en de eigenschap Opacity ontstaat. Maar zodra de behoefte ontstaat om in een blok een doorschijnende achtergrond te maken, hebben deze methoden een onaangenaam nadeel. Ik zal een korte recensie maken om duidelijk te maken waar we het over hebben, maar ook voor die lezers die niet bekend zijn met niet-traditionele opties voor het creëren van een doorschijnend effect.

Hoe kun je een tabel zo instellen dat hij doorschijnend is, maar sommige cellen zijn dat niet?

Om de transparantie van een element te wijzigen, biedt CSS3 de eigenschap Opacity; de waarde ervan kan variëren van 0 tot 1. Nul komt overeen met volledige transparantie van het element, en één daarentegen met dekking. Moderne browsers werken redelijk correct met deze eigenschap, met uitzondering van Internetbrowser Explorer, dus je moet er een speciale filtereigenschap voor gebruiken met de waarde alpha(Opacity=X) , waarbij X kan variëren van 0 tot 100.