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