The opacity property controls the transparency level of an element. Please note that the property applied to an element is inherited by all its child elements.
The opacity property controls the transparency level of an element. Please note that the property applied to an element is inherited by all its child elements.
Configuring the opacity level
You use the opacity style property to set the opacity of an element. The value of the property must be given as a number between '0.0' and '1.0', where '0.0' means fully transparent, and '1.0' means fully opaque. For example:
opacity: 0.4;Features
The property is represented by the following feature:
-
mcs:style.Opacity
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>Opacity</title>
<style type="text/css">
.title {
font-style:oblique;
font-size: 20px;
color: red;
font-weight:bold;
font-size: 20px;
padding: 10px;
}
.opacity_0{
opacity: 0;
}
.opacity_0_2{
opacity: 0.2;
}
.opacity_0_4{
opacity: 0.4;
}
.opacity_0_6{
opacity: 0.6;
}
.opacity_0_8{
opacity: 0.8;
}
.opacity_1_0{
opacity: 1.0;
}
.warning{
color: red;
padding: 4px;
}
.bg {
background: red;
font-weight:bold;
color: black;
height: 20px;
padding: 3px;
margin: 0px;
}
.border {
border:2px solid black;
}
.background {
background:url('/mcs/projects/examples/assets/images/gallery/photos/img2.jpg') repeat;
}
.box {
margin:20px;
background-color: white;
}
.box p{
margin:20px;
color: black;
font-weight:bold;
}
.col {
background: white;
color: black;
float: left;
margin: 1px;
padding: 2px;
text-align: center;
}
.row {
padding: 0px;
background: black;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<sel:select>
<sel:when expr="mcs:feature('mcs:style.Opacity')">
<div class="title opacity_0_8">Images</div>
<div>
<div class="col">
<div class="opacity_0_2">
<div>Opacity 0.2</div>
<object src="/mcs/projects/examples/policies/images/s1.mimg"/>
</div>
</div>
<div class="col">
<div class="opacity_0_4">
<div>Opacity 0.4</div>
<object src="/mcs/projects/examples/policies/images/s1.mimg"/>
</div>
</div>
<div class="col">
<div class="opacity_0_6">
<div>Opacity 0.6</div>
<object src="/mcs/projects/examples/policies/images/s1.mimg"/>
</div>
</div>
<div class="col ">
<div class="opacity_0_8">
<div>Opacity 0.8</div>
<object src="/mcs/projects/examples/policies/images/s1.mimg"/>
</div>
</div>
<div class="col">
<div class="opacity_1_0">
<div>Opacity 1.0</div>
<object src="/mcs/projects/examples/policies/images/s1.mimg"/>
</div>
</div>
<div class="clearfix"/>
</div>
<div class="title opacity_0_8">Backgrounds</div>
<div class="row border">
<p class="opacity_0 bg"> This background was configured with opacity: 0 </p>
<p class="opacity_0_2 bg"> This background was configured with opacity: 0.2 </p>
<p class="opacity_0_4 bg"> This background was configured with opacity: 0.4 </p>
<p class="opacity_0_6 bg"> This background was configured with opacity: 0.6 </p>
<p class="opacity_0_8 bg"> This background was configured with opacity: 0.8 </p>
<p class="opacity_1_0 bg"> This background was configured with opacity: 1.0 </p>
</div>
<div class="title opacity_0_8">Boxes</div>
<div class="border background">
<div class="box border opacity_0_2">
<p>This box was configured with opacity: 0.2. </p>
</div>
<div class="box border opacity_0_4">
<p>This box was configured with opacity: 0.4. </p>
</div>
<div class="box border opacity_0_6">
<p>This box was configured with opacity: 0.6. </p>
</div>
<div class="box border opacity_0_8">
<p>This box was configured with opacity: 0.8. </p>
</div>
<div class="box border opacity_1_0">
<p>This box was configured with opacity: 1.0. </p>
</div>
</div>
</sel:when>
<sel:otherwise>
<!-- markup for devices that do NOT support RGBA syntax -->
<div class="warning">Opacity is not supported </div>
</sel:otherwise>
</sel:select>
</body>
</html>