Logga in
Tillämpa opacitet i objekt genom att ange opacity som anger transparensen.
Värdet kan vara från 0.0 (full transparens) till 1.0 (ingen transparens)
Exemplet nedan använder opacity på en Box (DIV) med text som är placerad ovanför boxen med bilden:
width: 300px;
border: 15px solid #BAD1BA; border-radius: 20px;
background-color: #fff;
opacity: 0.5;
Klicka
här för att se fler exempel 
CSS-koden:
HTML-koden:
Egenskapen opacity påverkar allt innehåll i boxen (div) och det gäller alltså även text i exemplet ovan. Egenskapen opacity ärvs (inherit) från överordnade objekt (parent-child) och resultatet blir att även text-boxen får opacitet. Även om du placerar texten i en egen <DIV> så omsluts den av opacitets-boxen och ärver (inherit) egenskaperna från denna.
En lösning för att textinnehållet inte ska få transparens är att den inte har parent-child-förhållande till den box som använder opacity och då inte ärver egenskapen.
Exemplet nedan använder en Box (DIV) med text som är placerad i absolut position i förhållande till boxen med opacity. Opacitets-boxen som är transparent har en relativ position och omsluter inte textboxen. De två boxarna med opacitet och text har då inget parent-child-förhållande och textboxen ärver inte egenskapen.
width: 300px;
border: 15px solid #BAD1BA; border-radius: 20px;
background-color: #fff;
opacity: 0.5;
Klicka
här för att se fler exempel
CSS-koden. Notera att tre classer används, en till bilden, en till opaciteten och en till texten:
.bild_box {
width: 440px;
height: 266px;
border: 10px solid #F4F4F4;
box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);
background-image: url(bilder/grand_hotell_gavle.jpg);
}
.opacitets-box {
position: relative;
width: 300px;
height: 130px;
float: left;
margin: 50px 0 0 40px;
padding: 35px;
background-color: #fff;
border-radius: 20px;
opacity: 0.5;
}
.text_box {
position: absolute;
width: 300px;
height: 130px;
float: left;
margin: 50px 0 0 40px;
padding: 20px;
border: 15px solid #BAD1BA;
border-radius: 20px;
}
HTML-koden. Bild-boxen omsluter både opacitets-boxen och text-boxen. Opacitets-boxen har inget innehåll och omsluter inte text-boxen. Text-boxen placeras trots detta ovanför opacitets-boxen genom att absolut positionering används:
En enklare metod än att använda opacity enligt ovan är att använda RGBa färgvärden där du kan använda en alfa-kanal för att ange opacitet - se avsnittet ovan »
OBS! Den här metoden fungerar inte på bilder utan endast färger.
Exemplet nedan använder RGBa på en Box (DIV) med text som är placerad ovanför boxen med bilden. RGB-värdet 255,255,255 ger en Vit färg (samma som hexadecimala värdet #FFF). Alfa-värdet som ger opaciteten är angivet till 0.5:
width: 300px;
border: 15px solid #BAD1BA;
border-radius: 20px;
background-color:
rgba(255,255,255, 0.5);
Klicka
här för att se fler exempel
CSS-koden:
.bild_box {
width: 440px;
height: 266px;
border: 10px solid #F4F4F4;
box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);
background-image: url(bilder/grand_hotell_gavle.jpg);
}
.text_box {
width: 300px;
margin: 50px auto 0 auto;
padding: 20px;
border: 15px solid #BAD1BA;
border-radius: 20px;
background-color: rgba(255,255,255, 0.5);
}
HTML-koden:
skriv ut »