Hur ställer jag in bakgrundsbildens transparens i CSS? Genomskinlig bakgrund Hur man gör bakgrunden genomskinlig i en form
Ganska ofta kan du hitta en passande bild på Internet, till exempel för att infoga den på en webbplats. Eller så kanske du gör ett collage och behöver lägga till andra till en ritning. Men bilderna man behöver har oftast någon form av bakgrund.
Låt oss ta reda på hur vi kan skapa en genomskinlig bakgrund för en bild med hjälp av editornAdobePhotoshop. Jag har den engelska versionen av Adobe Photoshop CS5 installerad, så jag ska visa dig på den.
Jag kommer att försöka tillhandahålla olika snabbtangentskombinationer.
Om du inte har Photoshop installerat ännu, du använder det sällan, eller det är på engelska, kan du göra en transparent bakgrund i Paint.net. Detta är en enkel ryskspråkig bildredigerare som inte tar upp mycket utrymme på din hårddisk. Genom att klicka på länken kan du läsa den detaljerade artikeln. Du kan ladda ner programmet Paint.net från vår webbplats.
Låt oss först titta på ett enkelt exempel. Låt oss säga att du har en bild på en vanlig bakgrund, det kan vara en logotyp eller namnet på något. Låt oss göra denna logotyp eller inskription på en transparent bakgrund i Photoshop.
Öppna önskad bild i editorn. Låt oss nu göra en transparent bakgrund för lagret. I fönstret "Lager" dubbelklickar du på det tillagda lagret - det kommer att finnas ett hänglås mittemot det. Fönstret "Nytt lager" öppnas, klicka på "OK" i det. Efter detta försvinner låset.
Välj verktyget "Magic Wand". I egenskapsfältet, ange känslighetsnivån, ställ in olika värden för att förstå hur det fungerar, till exempel 20 och 100. För att avmarkera bilden, tryck på "Ctrl+D".
Ställ in känsligheten och klicka på bakgrundsområdet med trollstaven. För att lägga till de delar som inte är markerade till den valda bakgrunden, håll nere "Shift" och fortsätt välja. För att ta bort markerade områden, klicka på "Ta bort".
Nu istället för en bakgrund finns det ett schackbräde - det betyder att vi lyckades göra den vita bakgrunden genomskinlig. Ta bort markering – “Ctrl+D”.
Om du har en bild eller ett fotografi som har många olika färger och objekt, låt oss titta på hur man gör en transparent bakgrund för en bild i Photoshop.
I det här fallet kommer vi att använda verktyget Snabbval. Klicka på trollstaven med vänster musknapp med en liten fördröjning och välj önskat verktyg från menyn.
Nu måste vi välja objektet som vi vill lämna på en transparent bakgrund. I egenskapsfältet, ställ in olika storlekar och klicka på objektet, lägg till områden till det. Om en onödig bakgrund har markerats av misstag, tryck på "Alt" och ta bort den.
För att se resultatet, tryck på "Q". De delar av bilden som blir genomskinliga kommer att markeras i rosa.
Kopiera de markerade områdena genom att trycka på "Ctrl+C". Skapa sedan en ny fil, "Ctrl+N", med en transparent bakgrund.
Klistra in de kopierade fragmenten i den, "Ctrl + V". Om det finns några onödiga delar av bakgrunden kvar på dem, ta bort dem med hjälp av Eraser-verktyget. Vi sparar bilder tagna på en transparent bakgrund i PNG- eller GIF-format.
Gör bildens vita bakgrund genomskinlig, eller gör en genomskinlig bakgrund för enskilda fragment av en färgbild eller fotografi i Photoshop. Efter det kan du använda dem där det behövs: infoga dem på en webbplats, lägg till dem i en annan ritning eller gör intressanta collage.
CSS-bakgrundstransparens
Transparens för bakgrunden på webbplatsen skapas genom CSS-egenskaper. Du kan uppnå transparens på två sätt: genom opacitetsegenskapen och background:rgba(). Låt oss titta på var och en av dem och sedan göra en jämförelse.
1. CSS-opacitetsegenskap för bakgrundstransparens
CSS har opacitetsegenskapen, som kan användas för att ställa in transparensen för bilder, texter, inklusive bakgrunder.
Transparens specificeras helt enkelt genom att ange ett reellt tal från 0,0 till 1,0. Ju lägre siffra, desto mindre märkbart blir föremålet.
opacitet: 0,5; // Translucens opacitet: 0,2; // Objektet är endast synligt vid 20 % opacitet: 0,8; // Objektet är endast 80 % synligt
Låt oss titta på ett exempel med egenskapen opacitet.
Texten är också transparent
2. Transparens via egenskapen CSS background:rgba().
Det andra alternativet för att ställa in bakgrundstransparens på en webbplats är CSS-egenskapen background:rgba. Låt oss titta på ett exempel
Texten är också transparent
Denna kod översätts på sidan till följande:
Skillnaden mellan de två metoderna är att texten inuti blocket blir transparent när du använder opacitet.
I det andra fallet finns det inget sådant problem. Därför måste du titta på situationen - vad exakt förväntar du dig.
Den genomskinliga effekten av ett element syns tydligt i bakgrundsbilden och har blivit utbredd i olika operativsystem eftersom det ser stilrent och vackert ut. I webbdesign används också genomskinlighet och uppnås genom opacitetsegenskapen eller RGBA-färgformatet som är inställt för bakgrunden.
Opacitetsegenskap
Huvudfunktionen hos den här egenskapen är att transparensvärdet påverkar alla underordnade element i den, inte bara bakgrunden. Det betyder att både bakgrunden och texten blir genomskinliga och du kommer inte att kunna öka transparensnivån genom att lägga till . I tabell Figur 1 visar utseendet på text och bakgrund med olika opacitetsvärden.
Exempel 1 visar hur man skapar ett halvtransparent block med opacitet.
Exempel 1: Bakgrund på en webbsida
HTML5 CSS3 IE 9+ Cr Op Sa Fx
opacitet
RGBA
Normalt sett bör endast bakgrunden för ett element vara genomskinlig, och texten ska vara ogenomskinlig för att bibehålla läsbarheten. Opacitetsegenskapen är inte lämplig här eftersom texten inuti elementet också kommer att vara delvis transparent. Det är bäst att använda RGBA-formatet, som har en alfakanal, eller med andra ord, ett transparensvärde som en del av det. Värdet skrivs rgba , sedan listas värdena för de röda, blå och gröna färgkomponenterna inom parentes, separerade med kommatecken. Den sista är transparens, som är inställd från 0 till 1 (Fig. 1), där 0 betyder fullständig genomskinlighet och 1 opacitet för färgen.
Ris. 1. Syntax för att använda rgba
Exempel 2 visar användningen av RGBA-formatet för att skapa en genomskinlig bakgrund.
Exempel 2. Genomskinlig bakgrund
HTML5 CSS3 IE 9+ Cr Op Sa Fx
rgba
Hobbes var en av de första som lyfte fram detta problem ur psykologins perspektiv.
Resultatet av detta exempel visas i fig. 2. Bakgrundsopaciteten är inställd på 90 %.
Ris. 2. Genomskinlig bakgrund och ogenomskinlig text
För att skapa en transparent effekt i CSS, används egenskapen opacity.
IE8 och tidigare versioner stöder en alternativ egenskap - filter:alpha(opacitet=x) , där " x " kan variera från 0 till 100 , ju lägre värde desto mer transparent blir elementet.
Alla andra webbläsare stöder den vanliga CSS-egenskapsopaciteten, som kan ta ett tal från 0,0 till 1,0 som ett värde, ju lägre värde, desto mer transparent blir elementet:
Dokumentets namn
Prova "
Transparens när du svävar
Pseudo-class:hover låter dig ändra utseendet på element när du håller muspekaren över dem. Vi använder den här funktionen för att få bilden att förlora sin genomskinlighet när den hålls över:
Dokumentets namn
Prova "
Bakgrundstransparens
Det finns två möjliga sätt att göra ett element transparent: opacitetsegenskapen som beskrivs ovan och ange en bakgrundsfärg i RGBA-format.
Du kanske redan är bekant med RGB-färgrepresentationsmodellen. RGB (Röd, Grön, Blå - röd, grön, blå) är ett färgsystem som bestämmer nyans genom att blanda rött, grönt och blått. Till exempel, för att ställa in textfärgen till gul kan du använda någon av följande deklarationer:
Färg: rgb(255,255,0); färg: rgb(100%,100%,0);
Färger som specificeras med RGB kommer att skilja sig från de hexadecimala värden vi använde tidigare genom att de tillåter användning av en alfatransparenskanal. Det betyder att genom bakgrunden av ett element med alfatransparens kommer det som finns under det att synas.
Att deklarera en RGBA-färg liknar syntaxen med standard RGB-reglerna. Men vi kommer också att behöva deklarera värdet som RGBA (istället för RGB) och ange ett extra decimaltransparensvärde efter färgvärdet mellan 0,0 (helt transparent) och 1 (helt ogenomskinlig).
Skillnaden mellan opacitetsegenskapen och RGBA-egenskapen är att opacitetsegenskapen tillämpar transparens på hela elementet, vilket innebär att hela innehållet i elementet blir transparent. Och RGBA låter dig ställa in transparens för enskilda delar av ett element (till exempel bara texten eller bakgrunden):
Obs: RGBA-värden stöds inte i IE8 och tidigare. För att deklarera en reservfärg för äldre webbläsare som inte stöder alfafärgsvärden, bör du ange den först före RGBA-värdet: background: rgb(255,255,0); bakgrund: rgba(255,255,0,0,5);
Idag vill jag prata om transparent bakgrund för ett textblock, hur man gör det och vad CSS3 erbjuder för detta. Innan vi går vidare till rgba och hsla, låt oss titta på exempel på att använda en genomskinlig bakgrund för ett block med text, eller snarare hur detta uppnås och vilka problem som uppstår. För demonstrationen kommer vi att använda den här bilden, bearbetad av något program i Java, och länken till vilken tyvärr försvann för länge sedan.
Titta på bilden nedan. Det finns en grafisk bakgrund på vilken du vill lägga text över ett genomskinligt block. Helst ska det vara det som är numrerat 2 på bilden, men ibland kan det förekomma det som är numrerat 3. Det finns ytterligare en defekt, men jag kommer att nämna den verbalt lite lägre, eftersom Det fanns inget sätt att ta en skärmdump av det.
Genomskinlig bakgrund utan rgba och hsla
Genomskinlig PNG. Det bästa alternativet, eftersom Idag är det den mest webbläsare och den enklaste. För att blocket ska vara genomskinligt krävs en enpixel genomskinlig PNG, som ställs in som blockbakgrund. Det är allt. Brister: Endast en krävs.
Transparens genom opacitet. Blocktransparens ställs in i flera webbläsare enligt följande:
där 0,5 och 50 är 50 % transparens. Men det är ett problem. Om vi ställer in blocket som vi behöver för att ha sådan genomskinlighet, kommer vi att se det tredje alternativet i bilden ovan - innehållet i blocket kommer också att bli genomskinligt. Det finns dock en väg ut - fri positionering, med hjälp av vilken ett annat block placeras under textblocket, vilket ges genomskinlighet.
Låt oss titta på ett exempel. Låt blocket med en orange bild vara body-taggen, en behållare som innehåller både text och en genomskinlig bakgrund - #block_bg, inuti vilken finns ett block med en genomskinlig bakgrund #block_transparent, och ett block med text - #block_text.
Observera att det är nödvändigt att ställa in bredden på det genomskinliga blocket (rad 19), annars kommer det att kollapsa till 1 pixel och bredden på det allmänna blocket (rad 5), annars kommer texten att sträcka sig bortom det genomskinliga blocket (även om bredden kan ställas in för texten, men det finns ingen grundläggande skillnad kommer). För att få indrag från texten och kanten på det genomskinliga blocket använder vi utfyllnad på den sjätte raden. För att göra transparensen justerbar i höjdled ger vi den en högre höjd (rad 18) och en överlappning för det allmänna blocket (rad 4). Så vi lägger allt i ett block, som kan skjutas in i vilken del av sidan som helst där det finns en intressant bakgrund. Ja, du kanske vill lägga en bakgrund på det allmänna blocket block_bg, men det är bättre att inte göra det - du kommer att göra ditt liv svårare (beroende, naturligtvis, på uppgiften). Med andra ord, det är bättre att skjuta hela denna struktur i ett separat block, som kan ges vaddering och inte behöver oroa sig för det. Brister: För krångligt.
rgb och hsl, rgba och hsla – CSS3-egenskaper
Närmare bestämt är det inte precis egenskaper – det här är en ny möjlighet att ställa in färger för egenskaper som bakgrund, färg, kant, etc.
Namnen på egenskaperna kommer från färgsystemen RGB (Röd, Grön, Blå) och HSL (Hue, Satuation, Lightness). Det första systemet beskriver färgrymden genom att blanda de primära färgerna - röd, grön och blå. I det andra systemet visar färgkomponenter information om färg i en mer bekant form för människor: Vilken färg är det här? Hur mättad är den? Hur ljust eller mörkt är det?
rgb och rgba
Låt oss börja med rgb och rgba. Värdena för r, g, b kan ställas in från 0 till 255 eller från 0% till 100%. Värdet på a (alfa, transparens) mäts från 0 till 1 (bråkvärden specificeras genom en punkt - 0,4, 0,7, etc.). Om r, g och b är inställda på värden som är större än deras acceptabla intervall (till exempel 300 eller 110 % eller -5), kommer de att krympa till närmaste acceptabla värde.
Låt oss titta på allt med bakgrundsegenskapen som exempel (även om de som vill kan ta färg eller kant).
bakgrund: rgb(0, 0, 255); /*ren blå färg*/ bakgrund: rgb(100%, 50%, 0%); /*ren blå färg*/ bakgrund: rgb(10, 145, 500); /*kommer att kännas igen som 10, 145, 255*/ bakgrund: rgba(10, 145, 255, 1); /*samma som den föregående*/ bakgrund: rgba(100, 50, 255, 0,1); /*mycket transparent nyans av lila*/
Ja, jag glömde att säga att du inte kan sätta ett mellanslag mellan egenskapen och öppningsparentesen, och du kan inte ställa in vissa värden i vanliga siffror och andra i procent på samma rad. Om du gör detta kommer ingenting att fungera.
hsl och hsla
Och några ord om hsl och hsla. Värdet på a ställs in på samma sätt som för rgb och rgba, men med de tre första parametrarna är det lite annorlunda. h kan ställas in från 0 till 360, och s och l kan ställas in från 0% till 100%.
Och det viktigaste. Om det i RGB är väldigt svårt att bestämma färgen från ditt huvud (nästan alltid behöver du ett tredjepartsprogram med en pipett), så här räcker det med att ha en bild framför ögonen för att allt ska falla på plats. Bilden visar nyanserna av parametern h.
För att uppskatta den önskade färgen, välj en nyans, uppskatta sedan s, färgmättnad (där 0% är en omättad färg (gråton) och 100% är den mest mättade) och dess ljushet (0% - med den kommer färgen alltid vara svart och med 100 % - vit). Baserat på ovanstående visar bilden ljustonerna vid 100 % mättnad och 50 % ljushet.
Nu finns hela färgrymden i ditt huvud med en blick. Självklart ersätter manuellt val inte en pipett, och alla behöver inte ha en "färgrymd" i huvudet, men ibland, för att snabbt ta reda på vad som behövs och testa det, är det lämpligt.
Brister: Alla 4 egenskaperna stöds inte av donkey och äldre webbläsare.
Komplettering
I allmänhet ger CSS3 några mycket användbara saker, men som alltid är IE den främsta bromsen för framsteg. För klientsajter skulle jag avstå från att använda det för närvarande (de kommer att slösa bort sina hjärnor förgäves) och skulle välja alternativet med PNG. Och på din hemsida - varför inte. Särskilt om det besöks av avancerade människor som inte sitter på åsnor eller några fragment av antiken.
God dag, webbutvecklingsnördar, såväl som nybörjare. För dem som inte följer IT-trender, eller snarare webbmode, vill jag högtidligt informera dig om att denna publikation om ämnet: "Hur man gör ett transparent block med css-verktyg" är precis rätt för dig. Under det nuvarande 2016 anses införandet av olika transparenta objekt i onlinetjänster faktiskt vara ett elegant drag.
Därför kommer jag i den här artikeln att berätta om alla befintliga metoder för att skapa transparens, med början från antediluvianska lösningar, jag kommer att fokusera på kompatibiliteten för lösningar med webbläsare och även ge specifika exempel på programkod. Nu börjar vi jobba!
Metod 1. Antediluvian
När datorer fortfarande var svaga och "förmågor" inte utvecklades, kom utvecklare på sitt eget sätt att skapa en transparent bakgrund: att använda genomskinliga pixlar i sin tur med färgade. Blocket som skapades på detta sätt såg ut som ett schackbräde när det var skalat, men vid normal storlek liknade det någon form av genomskinlighet.
Denna, enligt min mening, "krycka" hjälper verkligen i äldre versioner av webbläsare där moderna lösningar inte fungerar. Men det är värt att notera att textvisningskvaliteten ,
inskriven i sådana, faller kraftigt.
Metod 2. Inte störd
I sällsynta fall löser utvecklare problemet med att introducera en genomskinlig bild genom att infoga... en färdig genomskinlig bild! För detta ändamål används bilder sparade i PNG-24-format. Detta grafiska format låter dig ställa in 256 nivåer av genomskinlighet.
Internet Explorer 6 fungerar inte med den här tekniken, du måste skriva skriptkod för den;
Du kan inte ändra bakgrundsfärger i css;
Om webbläsarens bildvisningsfunktion är inaktiverad försvinner den.
Metod 3. Marknadsförd
Det vanligaste och mest kända sättet att göra ett block transparent är fastigheten opacitet.
Parametervärdet varierar i intervallet, där vid 0 objektet är osynligt, och vid 1 visas det fullt ut. Det finns dock några obehagliga stunder även här.
För det första ärver alla underordnade element transparens. Det betyder att den inmatade texten också kommer att "lysa igenom" tillsammans med bakgrunden.
För det andra, Internet Explorer "vänder upp näsan" igen och, fram till version 8, fungerar inte med opacitet.
För att lösa detta problem, använd filtrera:alfa (Opacitet=värde).
Tidigare har jag berättat att RGB är en av de populära färgmodellerna, där R står för alla nyanser av rött, G för nyanser av grönt och B för nyanser av blått.
När det gäller css-parametern är A-variabeln ansvarig för alfakanalen, som i sin tur står för transparensen.
Den största fördelen med den senare metoden är att alfakanalen inte påverkar objekt som finns inuti det stiliserade blocket.
rgba(r, g, b, a) stöds från:
Opera version 10;
Internet Explorer 9;
Safari 3.2;
3 versioner av Firefox.
Jag skulle vilja påpeka ett intressant faktum! Den älskade Internet Explorer 7 ger ett felmeddelande när egenskaperna kombineras bakgrundsfärg med namnet på färgerna (bakgrundsfärg: guld). Därför bör du bara använda: