Transparant wrapper

HTML & CSS

7 svar · 677 visningar · startad av devotion

Medlem sedan jan. 20013 582 inlägg
Trådstart#1

Hej,

Jag har en vit wrapper på min sida och bakom den finns en bakgrund som består av en repeterad bild.

Hur gör man wrappern lite genomskinlig? Dvs att man ser bakgrunden, igenom, men att det ändå blir ett tydligt flt, där innehållet visas?

Mvh
Henrik

Medlem sedan aug. 2008815 inlägg
#2

opacity är en lösning.

Medlem sedan jan. 20013 582 inlägg
#3

Funkar det även på "färg" Sökte lite innan jag ställde frågan och fick för mig att det bara gällde bilder. :)

Mvh
Henrik

Medlem sedan juni 20019 519 inlägg
#4

nej opacity sätter hela elementet (inklusive dess barn) till den opacitet du skriver.

Medlem sedan aug. 20039 340 inlägg
#5

Öppna bilden i Photoshop. Vid behov gör följande två steg:
Image > mode > välj RGB om det inte redan är valt.
Högerklicka på bakgrundslagret i lagertabben och välj layer from background.
Justera opacity för lagret tills du är nöjd. Spara som PNG. Lämpligen genom att använda save for web and devices. Välj format PNG-24 och klicka för kryssrutan transparency. Sedankan du spara dokumentet som PSD, så du kan gå tillbaka och justera opaciteten igen.

Medlem sedan jan. 20013 582 inlägg
#6

Måste det vara en bild?

Nu ser css-koden ut så här:

.wrapper {
background: none repeat scroll 0 0 #FFFFFF;
margin: auto;
padding: 0;
width: 1004px;
}

Mvh
Henrik

Medlem sedan aug. 20039 340 inlägg
#7

Du kan använda dig av rgba.

.wrapper {
background: none repeat scroll 0 0 rgb(255, 255, 255);
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
margin: auto;
padding: 0;
width: 1004px;
}

Den första background-raden är en fallback för icke-kompatible läsare, främst IE7 och IE8. Notera att den raden måste säga background (och inte background-color) för att gamla IE ska uppfatta raden.

0.5 ger 50% transparens.

Medlem sedan aug. 20068 090 inlägg
#8

..men det fins ingen anledning att sätta bredd (width:1004px) alls om du vill att den ska täcka hela skärmen. Om ingen bredd anges så kommer divven att täcka allt i alla fall.

277 ms totalt · 4 externa anrop · v20260731065814-full.d34c6d5a
133 ms — deklarationer (db)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)
133 ms — ändringar (db)