Transparantie in CSS is de laatste tijd een behoorlijk trendy techniek, die problemen veroorzaakt bij de implementatie in verschillende browsers. Er bestaat nog steeds geen universele methode waarmee transparantie voor alle browsers kan worden geïmplementeerd. De laatste tijd is de situatie echter aanzienlijk verbeterd.

Dit artikel geeft een gedetailleerd overzicht van bestaande benaderingen, evenals codevoorbeelden en uitleg waarmee u met minimale inspanning hetzelfde resultaat in alle browsers kunt bereiken.

Eén ding dat het vermelden waard is, is dat hoewel transparantie al enkele jaren bestaat, het nooit deel heeft uitgemaakt van de CSS-standaard. Dit is een niet-standaard eigenschap die deel zou moeten uitmaken van de CSS3-specificatie.

Oude aanpak

In oudere versies van Firefox en Safari moet u de eigenschap als volgt toepassen:

#mijnElement ( -khtml-opaciteit: .5; -moz-opaciteit: 0.5; )

De eigenschap -khtml-opacity werd gebruikt in oudere versies van webkit-browsers. Deze eigenschap is verouderd en is niet langer nodig, tenzij u er zeker van bent dat een aanzienlijk deel van het verkeer op uw site afkomstig is van bezoekers die Safari 1.x gebruiken, wat uiteraard onwaarschijnlijk is.

De volgende regel gebruikt de eigenschap -moz-opacity, die werkte in zeer vroege versies van de Mozilla-engine. Firefox stopte met de ondersteuning ervan in versie 0.9.

CSS-transparantie in Firefox, Safari, Chrome en Opera

Voor de meeste moderne browsers is het voldoende om de volgende eigenschap te gebruiken:

#mijnElement ( dekking: .7; )

In het bovenstaande voorbeeld is het element ingesteld op 70% dekking (30% transparantie). Dat wil zeggen, als we de waarde op één zetten, zal het element ondoorzichtig zijn, en dienovereenkomstig zal het instellen van deze waarde op nul het onzichtbaar maken.

De dekkingseigenschap verwerkt 2 decimale cijfers. Dat wil zeggen dat de waarde ".01" zal verschillen van de waarde ".02", hoewel dit niet merkbaar is.

CSS-transparantie voor Internet Explorer

Zoals gewoonlijk is Internet Explorer niet vriendelijk met andere browsers. Bovendien hebben we nu drie versies van deze browser die op vrij grote schaal worden gebruikt, waarbij de transparantie-instelling in elke versie anders is en soms extra inspanning vereist om een ​​positief resultaat te verkrijgen.

#mijnElement (filter: alpha(dekking=40); )

In dit voorbeeld wordt de eigenschap filter gebruikt, die werkt in versies 6-8, maar voor versies 6 en 7 is er één beperking: de eigenschap hasLayout van het element moet worden ingesteld op true . Deze woning is alleen aanwezig in IE en je kunt er bijvoorbeeld meer over lezen op Habré.

Een andere manier om transparantie in te stellen met behulp van CSS in IE8 is door de volgende aanpak te gebruiken (let op de opmerkingen):

#myElement ( filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* werkt in IE6, IE7 en IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * alleen voor IE8 */ )

De eerste regel werkt in alle momenteel gebruikte versies, de tweede - alleen in IE8. Merk op dat de tweede regel het voorvoegsel -ms- gebruikt en dat de waarde tussen aanhalingstekens staat.

CSS-transparantie instellen en wijzigen met JavaScript of jQuery

U kunt de volgende code gebruiken om de transparantie in te stellen:

Document.getElementById("mijnElement").style.opacity = ".4"; // voor de meeste browsers document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // voor IE

In dit geval is het natuurlijk veel eenvoudiger om jQuery te gebruiken, bovendien werkt het in alle browsers:

$("#mijnElement").css(( dekking: .4 )); //werkt in alle browsers

U kunt deze eigenschap animeren:

$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animatie is voltooid; deze code werkt in alle browsers. ));

RGBA-functie

CSS3 is van plan alfakanalen te ondersteunen met behulp van de rgba-functie. Deze functie werkt in Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Het wordt als volgt gebruikt:

#rgba (achtergrond: rgba(98, 135, 167, .4); )

In dit geval geeft de laatste parameter het dekkingsniveau aan.

HSLA-functie

Net als bij de vorige functie kunt u met CSS3 ook een semi-transparante kleur instellen met behulp van de HSLA-functie, waarvan de parameters Tint, Verzadiging, Lichtheid en Alfakanaal zijn.

#hsla (achtergrond: hsla(207, 38%, 47%, .4); )

Een belangrijk punt bij het gebruik van de functies rgba en hsla is dat de transparantie-instelling niet wordt toegepast op onderliggende elementen, terwijl het gebruik van de eigenschap opacity wordt overgenomen.

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

Syntaxis van CSS-dekking

dekking: waarde;

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

Voorbeelden: zoals transparantie in html

Voorbeeld nr. 1. Transparante afbeelding in html

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

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

CSS прозрачность - кросс-браузерное решение - 3.8 out of 5 based on 6 votes

В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.

Как задать прозрачность любого элемента

В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.

Пример использования:

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:

orem Ipsum is slechts een proeftekst uit de druk- en zetindustrie. Lorem Ipsum is de standaard proeftekst in de sector sinds de 16e eeuw, toen een onbekende drukker een galei met letters nam en deze door elkaar husselde om een ​​lettertype-specimenboek te maken. Het heeft niet alleen vijf eeuwen overleefd, maar ook de sprong naar elektronisch zetwerk. , en bleef in wezen ongewijzigd. Het werd in de jaren zestig gepopulariseerd met de introductie van Letraset-vellen met Lorem Ipsum-passages, en meer recentelijk met desktop publishing-software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
Het is een al lang bekend feit dat een lezer wordt afgeleid door de leesbare inhoud van een pagina wanneer hij naar de lay-out kijkt. Het punt van het gebruik van Lorem Ipsum is dat het een min of meer normale verdeling van letters heeft, in tegenstelling tot het gebruik van "Inhoud hier, inhoud hier", waardoor het op leesbaar Engels lijkt. Veel desktop publishing-pakketten en webpagina-editors gebruiken Lorem Ipsum nu als hun standaardmodeltekst, en een zoekopdracht naar "lorem ipsum" zal veel websites aan het licht brengen die nog in de kinderschoenen staan. Er zijn in de loop der jaren verschillende versies ontstaan, soms per ongeluk, soms met opzet (ingevoegde humor en dergelijke).

Dus vandaag zullen we erover praten transparantie in html Pagina's. Je bent waarschijnlijk transparante pop-upblokken tegengekomen, of het nu een fotogalerij of inlogformulieren zijn op een populaire website. Er zijn veel toepassingen voor transparantie in HTML. Hoe wordt het gemaakt en waar kan het worden gebruikt?

Laten we eerst en vooral begrijpen dat ons document niet slechts één monitorvlak heeft - het is over het algemeen driedimensionaal, ik noemde dit in het artikel "Z-index". Dienovereenkomstig zou zelfs een volledig transparante laag, als deze zich bovenaan de weergavestapel zou bevinden, de toegang tot andere elementen blokkeren. Dit is een van de belangrijkste toepassingen van transparante blokken. Hoewel meestal gebruik wordt gemaakt van een schaduweffect, zal een volledig transparante laag precies hetzelfde werken. Veel populaire fotogalerijen werken bijvoorbeeld; er is een gearceerde laag georganiseerd waarin foto's en bedieningselementen daarvoor worden weergegeven. De rest van de pagina is “bedekt” met een (semi)transparante laag, waardoor de toegang tot alle andere elementen op de pagina wordt geblokkeerd. Die. U kunt de pagina niet verlaten door op een link erop te klikken - alle tekst is bedekt met een achtergrond. Om terug te keren naar de hoofdtekst van de site, bieden ze meestal bedieningselementen voor het sluiten van de galerij, het inlogformulier, enz. Beheer het tonen/verbergen van transparante blokken met behulp van javascript. Helaas is er geen alternatief voor. Zonder het te gebruiken, ziet de gebruiker het transparante blok helemaal niet, of kan het niet sluiten zonder de huidige pagina te verlaten. Ik merk op dat hiervoor zichtbaarheids- of weergave-eigenschappen worden gebruikt.

Dus hoe is transparantie eigenlijk georganiseerd in html? Het instellen van de transparantie van elementen is over het algemeen niet opgenomen in de CSS-specificatie, dus u moet meerdere instructies tegelijk gebruiken om deze te maken. Sommige browsers (dwz) werken met de ene optie, andere met een andere. Dat wil zeggen gebruikt de ingebouwde filterfunctionaliteit, andere browsers gebruiken de eigenschap "opacity", die is ingesteld in het bereik van 0 (volledig transparant object) tot 1 (volledig ondoorzichtig). In het geval van 30% transparantie schrijft u bijvoorbeeld ' opaciteit: 0,30; filter:alfa(dekking=30);". De eigenschappen zijn, zoals uit het voorbeeld blijkt, vergelijkbaar - alleen in het eerste geval wordt een getal van 0 tot 1 gebruikt, in het tweede geval wordt een percentagenotatie gebruikt. Een voorbeeld van zo'n blok:

<div-stijl = "positie:absoluut; boven: 0; links: 0; achtergrondkleur:rgb(18, 114, 214); breedte:100%; id = "VideoFrame" >

In het voorbeeld wordt een videoweergaveblok gebruikt, dat wordt geactiveerd wanneer u op de videominiatuur klikt. De hoogte van het blok is niet gespecificeerd, omdat deze kan variëren afhankelijk van de schermgrootte en pagina-inhoud. Daarom wordt het dynamisch berekend bij het openen van een video. Een voorbeeld van het gebruik van deze techniek is te zien op de hoofdpagina van de website ruscircus.ru, waar ik ooit aan heb gewerkt.

Dat is in feite het hele geheim van transparantie in html. We gebruiken z-index en dekking om een ​​transparant effect te bereiken. En je kunt hier veel toepassingen voor vinden - alles wordt hier alleen beperkt door je verbeeldingskracht.

08.02.2013 Ik zal de vragen beantwoorden die in de reacties worden gesteld, namelijk over hoe je een ondoorzichtig exemplaar op een transparant blok kunt maken. Alles is hier eenvoudig, het is niet voor niets dat ik in het materiaal een link heb aangegeven naar het materiaal over z-index, je moet een ander blok maken, met een hogere z-index dan de transparante. Nu, in een paar minuten, schetste ik een voorbeeld. Blokken:

<div-stijl = "positie:absoluut; boven: 0; links: 0; achtergrondkleur:rgb(18, 114, 214); breedte:100%; hoogte:100%; opaciteit: 0,30; filter:alfa(dekking=30); zichtbaarheid: verborgen; z-index:1;" id = "VideoFrame" > <div id = "VideoFrame2" style = "positie:absoluut; boven: 25%; links: 25%; achtergrondkleur: wit; breedte:50%; hoogte:50%; dekking: 0,99; filter:alfa(dekking=99); zichtbaarheid: verborgen; z-index:2;" onclick = "javascript:HideForm();" > Hier schrijven we de tekst</div>

En javascript-functies

< script type= "text/javascript" >functie ShowForm() ( document.getElementById ("VideoFrame" ) .style .visibility = "zichtbaar" ; document.getElementById ("VideoFrame2" ) .style .visibility = "zichtbaar" ; ) functie HideForm() ( document.getElementById (" VideoFrame" ) .style .visibility = "verborgen" ; document.getElementById ("VideoFrame2") .style .visibility = "verborgen" ; )

De eerste functie geeft een transparant blok weer (samen met een ondoorzichtig tekstblok) - het kan aan een knop worden gekoppeld. link, enz.. De tweede functie die ik heb is gekoppeld aan een muisklik op een blok met tekst - het verbergt het transparante blok.

Ik hoop dat ik wat duidelijkheid heb gegeven over hoe dit werkt. Nou, zo niet, stel dan vragen.