HTML & CSSur HTML, XHTML & CSS
7 svar · 655 visningar · startad av devotion
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
opacity är en lösning.
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
nej opacity sätter hela elementet (inklusive dess barn) till den opacitet du skriver.
Ö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.
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
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.
..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.
