Dit artikel zal je kennis laten maken met een concept dat je zal helpen om ondoorzichtigheid in en vertellen u hoe u deze parameter bestuurt. De volgende tips komen in dit artikel aan bod:
het omzetten van een dubbel naar een int
- Ondoorzichtigheid in CSS
- Ondoorzichtigheid overgenomen met trapsgewijze elementen
- RGBA-kenmerkinstelling voor trapsgewijze elementen
- De ondoorzichtigheid verandert in het zweefeffect
De ondoorzichtigheid van een element op de achtergrond is een nuttige functie-instelling in HTML-ontwerp. Door het niveau van ondoorzichtigheid in te stellen (omgekeerde transparantie), kan een ontwerper de zichtbaarheid van het element bepalen via de eigenschap CSS-ondoorzichtigheid. Dit wordt over het algemeen gebruikt als achtergrondinstelling wanneer er trapsgewijze elementen zijn die boven elkaar zijn geplaatst.
Het meest voorkomende scenario waarin deze functie wordt gebruikt, is dit:
- Een gedeeltelijk transparante achtergrondafbeelding wordt achter een tekstelement geplaatst.
- De achtergrondafbeelding is wazig zichtbaar, dus het domineert de tekst ervoor niet.
- Het beeld kan volledig in beeld komen wanneer de gebruiker er expliciet voor kiest om het te zien.
Misschien wilt u de voordat u verder gaat met het leren over CSS-ondoorzichtigheid.
Bezoek voor een uitgebreide CSS-zelfstudie Edureka CSS-zelfstudie voor beginners . U krijgt een uitstekende uitleg over de manier waarop CSS moet worden gebruikt om HTML-webontwerp te verbeteren.
Verderop met dit artikel over dekking in CSS
Ondoorzichtigheid in CSS
In CSS wordt Ondoorzichtigheid ingesteld als een numerieke waarde tussen 0,0 - 1,0. Waarden die dichter bij nul liggen, vertegenwoordigen meer transparantie, de afbeelding zal erg licht zijn in zichtbaarheid. Laten we beginnen met een voorbeeld van een afbeelding die wordt weergegeven met 50% transparantie. Zie Voorbeeld 1 hieronder.
Voorbeeld 1: achtergrondafbeelding ingesteld op half transparantie
img {opacity: 0.5 filter: alpha (opacity = 50) / * Voor IE8 en eerder * /} 
Voorbeeld 1: uitvoer
Oorspronkelijke afbeelding (100% dekking)
Afbeelding met een dekking van 50%
In het bovenstaande voorbeeld was er maar één element: een afbeelding. Andere elementen kunnen ook worden ingesteld met de ondoorzichtigheidsparameter, zoals tekst, div-elementen enzovoort.
Verderop met dit artikel over dekking in CSS
Ondoorzichtigheid overgenomen met trapsgewijze elementen
Wanneer elementen op elkaar worden gestapeld en het achtergrondelement de ondoorzichtigheidsinstelling heeft, wordt het overgenomen door alle onderliggende elementen. Dit is de standaardinstelling . Dat betekent dat als een tekstvak over een afbeelding wordt geplaatst en de afbeelding een ondoorzichtigheid van 0,5 heeft, zowel de afbeelding als het tekstelement slechts gedeeltelijk zichtbaar zijn.
Laten we in ons volgende voorbeeld het voorbeeld nemen van een kind-tekstelement dat over de TOM & JERRY-afbeelding wordt geplaatst. We kunnen het standaard ondoorzichtigheidseffect zien in Voorbeeld 2.
java zet binair om in decimaal
.container {position: relatieve text-align: center onacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRYVoorbeeld 2: tekst neemt de ondoorzichtigheid over van de bovenliggende afbeelding
Verderop met dit artikel over dekking in CSS
RGBA-kenmerkinstelling voor trapsgewijze elementen
Er is een andere manier waarop ondoorzichtigheid kan worden gecontroleerd met trapsgewijze elementen. Als u wilt dat het onderliggende element niet wordt beïnvloed door de ondoorzichtigheid van het achtergrondelement, kunt u RGBA-attribuutinstelling .
Voorbeeld 3: RGBA-instelling gebruiken
background: rgba (76, 175, 80, 1.0) / * Afbeelding heeft geen dekking-instelling * / / * Groene achtergrond voor tekst met 100% dekking * / / * Blauwe kleurentekst heeft 100% dekking * /
background: rgba (76, 175, 80, 0.4) / * Afbeelding heeft geen dekking-instelling * / / * Groene achtergrond voor tekst met 40% dekking * / / * Blauwe tekst is nog steeds zichtbaar met 100% dekking * /
Na de RGB-kleurcode staat attribuut ‘a’ voor alpha . De alpha parameter is een getal tussen 0,0 (volledig transparant) en 1,0 (volledig ondoorzichtig).
Verderop met dit artikel over dekking in CSS
wat is jit in java
De ondoorzichtigheid verandert in het zweefeffect
In sommige scenario's willen webontwerpers dat de dekking varieert, afhankelijk van of de gebruiker al dan niet op het element gefocust is. Stel dat een afbeelding standaard is ingesteld op 50% dekking. Wanneer de gebruiker echter met de muis over de afbeelding beweegt, willen we dat de afbeelding volledig in focus komt met 100% dekking.
Voorbeeld 4 laat zien hoe dit wordt gedaan.
Algemene aandachtspunten:
- De ondoorzichtigheidsinstelling is een alternatief voor het gebruik van het kenmerk ‘zichtbaarheid’ in CSS. Door de ondoorzichtigheidsinstelling te gebruiken, is het echter gemakkelijk om verschillende mate van transparantie in te stellen, van nul tot volledig.
- De mate van ondoorzichtigheid moet worden ingesteld na zorgvuldig testen in verschillende browsers. Als de dekking op lage waarden is ingesteld, kan de tekst of afbeelding soms volledig onzichtbaar of onleesbaar worden.
- Het idee achter het gebruik van ondoorzichtigheid is om een scherpe focus te leggen op sommige elementen, terwijl andere achtergrondelementen de aandacht van de gebruiker niet afleiden. Dergelijke achtergrondelementen worden dus met een lagere dekking ingesteld.
- In Internet Explorer, voor IE8 en oudere versies, is de ondoorzichtigheidseigenschap een ‘filter’ -instelling die varieert van 1 tot 100. In alle andere browsers varieert deze van 0 tot 1.
Dit brengt ons bij het einde van dit artikel over dekking in CSS.
Als je meer wilt weten over webontwikkeling, bekijk dan het door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).
Als je nog steeds geïnteresseerd bent Als je nog vragen hebt, kun je deze posten in het commentaargedeelte van deze 'Opacity In CSS' -blog, en we nemen zo snel mogelijk contact met je op.