Rss Feeds
2 Genomskinliga bilder med CSS

Genomskinliga bilder med CSS

,

Med CSS är det möjligt att ge bilder olika grad av genomskinlighet. Det kan vara en en användbar effekt om man exempelvis vill ge fokus åt vissa bilder i ett bildgalleri. Den här guiden visar hur man går tillväga.

Att göra bilder genomskinliga är inte helt enkelt eftersom alla webbläsare  har sitt eget sätt att hantera genomskinlighet. För att genomskinlighet ska fungera i alla webbläsare behövs därför inte mindre än fyra olika CSS regler.

CSS

img.transparent {
   filter:alpha(opacity=40);
   -moz-opacity:0.4;
   -khtml-opacity: 0.4;
   opacity: 0.4;
}

I ovanstående exempel är bilden 40% genomskinlig.

Observera att sidan måste ha en korrekt Doctype för att genomskinlighet ska fungera i Internet Explorer.

CSS egenskap Förklaring
opacity: 0.4; Denna egenskap fungerar i nyare versioner av Firefox, Safari och Opera. Detta är den nuvarande standarden i CSS.
filter:alpha(opacity=40); Denna egenskap används av Internet Explorer
-moz-opacity:0.5; Denna egenskap används av äldre Molzilla webbläsare som Netscape Navigator.
-khtml-opacity: 0.5; Denna egenskap används av äldre versioner av Safari (1.x)

Dela

| Mer

Kommentarer

2 kommentarer för " Genomskinliga bilder med CSS" Kommentera nu!

Emma W
Den 2009 - 08 - 25 09:35:36

Intressant inlägg! Jag håller precis på att lära mig att göra hemsidor och undrar om det går skapa drop-shadows med denna metod och i så fall hur?
MVH Emma

Mattias
Den 2009 - 08 - 27 09:14:47

Ja det gör det. Det finns flera olika sätt att skapa skuggeffekter på en webbsida. Det går att fixa med .png-bilder, med javascript eller med CSS. Eventuellt kommer det en längre artikel om några veckor med några olika metoder att skapa skuggor.

Lämna en kommentar

Namn* Epost* Blogg / Webbsida
Liknande artiklar
0

Flytande citat som i veckotidningar

I många magasin och tidningar brukar det finnas citat som flyter inuti ett textstycke. Detta guide visar dig steg för steg hur du kan lägga in citat i din text med hjälp av CSS och HTML-taggen blockqu...

1

Gratis bakgrundsbilder

Det finns flera sidor som erbjuder gratis bakgrundsbilder för nedladdning. En av de bättre är GRsites.com. Här visar vi några av våra favoriter och guidar dig till hur du enkelt kan byta bakgrundsbild...

3

Runda hörn med css

Det finns en rad olika tekniker för att skapa runda hörn med hjälp av css. Här är ett av de enklaste sätten att skapa runda hörn på en box. Metoden använder sig av fyra div taggar, några få rader cssk...