You can control the transparency level of an element using the RGBA color model, i.e. the RGB model with the alpha channel specifying the opacity of a color. Please note that the transparency applied to an element is not inherited by its child elements.
You can control the transparency level of an element using the RGBA color model, i.e. the RGB model with the alpha channel specifying the opacity of a color. Please note that the transparency applied to an element is not inherited by its child elements.
Configuring the transparency level
You use the RGBA color model to set the transparency level of an element, for example, the following style rule specifies a transparent blue background.
background-color: rgba(0,0,255,0.4);Please refer to http://www.w3.org/TR/css3-color/#rgba-color for more information about the RGBA color model.
The 'transparent' color keyword
The 'transparent' keyword can be used as a color name for the background-color, border-color and color properties. Setting the value of a property to 'transparent' makes the selected element transparent, i.e. the keyword is a shorthand for rgba(0,0,0,0). For example, the following style rule specifies that the border of an element must be transparent.
border-top-color: transparent;Features
Transparent colors are represented by the following feature:
-
mcs:style.TransparentColor
This feature is supported on devices that support the RGBA color model.
Example
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:sel="http://www.w3.org/2004/06/diselect">
<head>
<title>Transparency</title>
<style type="text/css">
.color_rgba_255_0_0_0_0{
color: rgba(255,0,0,0.0);
}
.color_rgba_255_0_0_0_2{
color: rgba(255,0,0,0.2);
}
.color_rgba_255_0_0_0_4{
color: rgba(255,0,0,0.4);
}
.color_rgba_255_0_0_0_6{
color: rgba(255,0,0,0.6);
}
.color_rgba_255_0_0_0_8{
color: rgba(255,0,0,0.8);
}
.color_rgba_255_0_0_1_0{
color: rgba(255,0,0,1.0);
}
.color_transparent{
color: transparent;
}
.background_color_rgba_255_0_0_0_0{
background-color: rgba(255,0,0,0.0);
}
.background_color_rgba_255_0_0_0_2{
background-color: rgba(255,0,0,0.2);
}
.background_color_rgba_255_0_0_0_4{
background-color: rgba(255,0,0,0.4);
}
.background_color_rgba_255_0_0_0_6{
background-color: rgba(255,0,0,0.6);
}
.background_color_rgba_255_0_0_0_8{
background-color: rgba(255,0,0,0.8);
}
.background_color_rgba_255_0_0_1_0{
background-color: rgba(0,0,255,0.4);
}
.background_color_transparent{
background-color: transparent;
}
.border_top_color_rgba_255_0_0_0_0{
border-top-color: rgba(255,0,0,0.0);
}
.border_top_color_rgba_255_0_0_0_2{
border-top-color: rgba(255,0,0,0.2);
}
.border_top_color_rgba_255_0_0_0_4{
border-top-color: rgba(255,0,0,0.4);
}
.border_top_color_rgba_255_0_0_0_6{
border-top-color: rgba(100%,0%,0%,0.6);
}
.border_top_color_rgba_255_0_0_0_8{
border-top-color: rgba(100%,0%,0%,0.8);
}
.border_top_color_rgba_255_0_0_1_0{
border-top-color: rgba(100%,0%,0%,1.0);
}
.border_top_color_transparent{
border-top-color: transparent;
}
.border_styles {
border-style:solid;
border-width: 7px;
border-bottom-color: rgba(120,90,90,1);
border-left-color: rgba(120,90,90,1);
border-right-color: rgba(120,90,90,1);
}
</style>
</head>
<body>
<div>RGBA syntax examples:</div>
<sel:select>
<sel:when expr="mcs:feature('mcs:style.TransparentColor')">
<!-- markup for devices that support RGBA syntax -->
<div>*color property examples*:</div>
<div class="color_rgba_255_0_0_0_0">
color: rgba(255,0,0,0.0)
</div>
<div class="color_rgba_255_0_0_0_2">
color: rgba(255,0,0,0.2)
</div>
<div class="color_rgba_255_0_0_0_4">
color: rgba(255,0,0,0.4)
</div>
<div class="color_rgba_255_0_0_0_6">
color: rgba(100%,0%,0%,0.6)
</div>
<div class="color_rgba_255_0_0_0_8">
color: rgba(100%,0%,0%,0.8)
</div>
<div class="color_rgba_255_0_0_1_0">
color: rgba(100%,0%,0%,1.0)
</div>
<div>*background-color property examples*:</div>
<div class="background_color_rgba_255_0_0_0_0">
background-color: rgba(255,0,0,0.0)
</div>
<div class="background_color_rgba_255_0_0_0_2">
background-color: rgba(255,0,0,0.2)
</div>
<div class="background_color_rgba_255_0_0_0_4">
background-color: rgba(255,0,0,0.4)
</div>
<div class="background_color_rgba_255_0_0_0_6">
background-color: rgba(255,0,0,0.6)
</div>
<div class="background_color_rgba_255_0_0_0_8">
background-color: rgba(255,0,0,0.8)
</div>
<div class="background_color_rgba_255_0_0_1_0">
background-color: rgba(255,0,0,1.0)
</div>
<div>*border-top-color property examples*:</div>
<div class="border_top_color_rgba_255_0_0_0_0 border_styles">
border-top-color: rgba(255,0,0,0.0)
</div>
<div class="border_top_color_rgba_255_0_0_0_2 border_styles">
border-top-color: rgba(255,0,0,0.2)
</div>
<div class="border_top_color_rgba_255_0_0_0_4 border_styles">
border-top-color: rgba(255,0,0,0.4)
</div>
<div class="border_top_color_rgba_255_0_0_0_6 border_styles">
border-top-color: rgba(255,0,0,0.6)
</div>
<div class="border_top_color_rgba_255_0_0_0_8 border_styles">
border-top-color: rgba(255,0,0,0.8)
</div>
<div class="border_top_color_rgba_255_0_0_1_0 border_styles">
border-top-color: rgba(255,0,0,1.0)
</div>
<div>'transparent' as a color:</div>
<div>*'transparent' and the color property*</div>
<div class="color_transparent">
color: transparent
</div>
<div>*'transparent' and the backround-color property*</div>
<div class="background_color_transparent">
background-color: transparent
</div>
<div>*'transparent' and the border-top-color property*</div>
<div class="border_top_color_transparent border_styles">
border-top-color: transparent
</div>
</sel:when>
<sel:otherwise>
<!-- markup for devices that do NOT support RGBA syntax -->
<div style="color: red;">
RGBA syntax is not supported
</div>
</sel:otherwise>
</sel:select>
</body>
</html>