De css-eigenschap "transparantie" is een makkelijke manier om een site-ontwerp interessanter te maken.

Vandaag wordt de creatie van een website ontwerp een echte kunst. Het is niet alleen een set pagina-elementen van een bepaalde kleur en grootte, lettertypes van verschillende stijlen en thematische tekeningen. Om de site van anderen te onderscheiden, om de aandacht van bezoekers te trekken en om deze te leiden naar die of andere elementen, worden een groot aantal methoden en gereedschappen gebruikt. Onder hen is er een zeer populaire eigenschap css - transparantie. Deze techniek is vrij modieus en effectief en daarom wordt het vaak gebruikt. U kunt transparantie geven aan verschillende objecten op de site pagina - bijvoorbeeld tekst, hele blok of foto. Het wordt ook op vele manieren bereikt. Laten we ze hieronder nadenken.

Parameters voor het instellen van de transparantie van elementen

Parameters die de mate van doorzichtigheid van de elementen kunnen regelen, zijn meerdere. Ze worden gebruikt afhankelijk van specifieke doeleinden, evenals de browser, waaronder het ontwerp "aangepast" is. Deze omvatten de volgende eigenschappen:

• ondoorzichtigheid;
• filter;
• PNG afbeelding als achtergrond.

De waarden van de eigenschap css "transparantie" veranderen als volgt: hoe groter het getal, hoe lager het transparantieniveau van het element. In opaciteit varieert het van 0 tot 1, in filter - van 10 tot 100. En de laatste wordt gebruikt voor de browser Interet Explorer, en voor alle anderen wordt de opaciteit eigenschap gebruikt.

Transparantie van de afbeelding (wijzigen)

Laten we beginnen met de optie wanneer de transparantie wordt weergegeven wanneer u over het muis cursorelement beweegt .

Overweeg hoe u de transparantie van een foto kunt instellen. CSS biedt twee mogelijkheden. Om dit te doen is het nodig om het direct in de code van het html-document te schrijven als volgt:

1. Geef het pad op de afbeelding op.
2. Bepaal de transparantie instellingen wanneer u de cursor zwaait en niet. Om dit te doen gebruiken we de onmouseover en onmouseout eigenschappen, waarin we de opaciteit en filterwaarden instellen.

Deze zelfde kenmerken kunnen in het css-document worden geschreven, en in de broncode, voegt u alleen een link toe. De resultaten zijn hetzelfde.

Transparantie van tekst- en paginablokken

Wat de tekst of blok (de transparantie van de div) betreft, stelt css het gebruik van een optie aan die vergelijkbaar is met het creëren van een transparante afbeelding, dat wil zeggen met behulp van een css-bestand dat is aangesloten, waarin de vereiste parameters worden ingesteld. U kunt op een eenvoudiger manier gaan. Wanneer u de stijlen van het div style-blok of de p-tekst specificeert, moet u de volgende html-code voor de onmouseover en onmouseout-elementen voorschrijven. Beide opties werken en geven het gewenste resultaat.

Transparantie constante

In sommige gevallen is de transparantie van een object, ontwerpelement of tekst verplicht te stellen. In deze situatie is de oplossing nog makkelijker dan wanneer u de muis cursor zwaait.

Voor het css-element wordt de transparantie gegeven door de volgende code. In het div style-blok wijzen wij de waarden voor achtergrond toe (bijvoorbeeld # ff8800), opaciteit (bijvoorbeeld 0,5), evenals breedte en opvulling.

Voor de afbeelding in de code invoeren we de waarden van de onaccept en het filter, en geeft u ook het pad naar de afbeelding op.

RGBA methode

Er zijn andere opties voor het gebruik van deze eigenschap css: transparantie kan worden toegepast op de achtergrondkleur van elk ontwerpelement. Hiervoor wordt de RGBA-methode gebruikt. De eerste drie letters geven de hoofdkleuren aan (rood, vast, blauw) en de laatste - alfa, die het niveau van transparantie bepaalt. Gebruik RGBA-formaat, voorschrijf de mate van transparantie, die het in het laatste cijfer aangeeft. Dit is bijvoorbeeld het geval: achtergrond: rgba (240,2,33,0,4035).

conclusie

Met behulp van een eenvoudige maar effectieve eigenschap css "transparantie" in de loop van het werk op het site design kunt u de elementen interessanter en zichtbaarder maken, met een minimum aan inspanning. De beschreven opties voor het specificeren van transparantie eigenschappen zullen u hierbij helpen.