opacity özelliği, elementin saydamlık oranını belirler.
DOM Sözdizimi
element.style.opacity = "matlik"
CSS Sözdizimi
opacity: matlik
| matlik | '0' ile '1' arasında kayar noktalı değer alarak nesnenin saydamlık oranını belirler. '1.0' değeri nesnenin mat/opak olduğu, '0.0' değeri ise saydam olduğu değerlerdir. |
Aşağıdaki örnek, farklı renklerdeki dört kutucuğun üzerinde arkaplan rengi siyah olan bir div elementinin opacity ile saydamlık oranının değiştirilmesini göstermektedir.
<style type="text/css">
.div1, .div2, .div3, .div4 {
width:90px;
height:70px;
float:left;
}
.div1 {
background-color:blue;
}
.div2 {
background-color:green;
}
.div3 {
background-color:red;
}
.div4 {
background-color:yellow;
}
#div5
{
margin:40px auto auto auto;
width:80px;
height:60px;
opacity: 0.9;
background-color: black;
}
</style>
<script type="text/javascript">
function opakAyarla(elem)
{
var div = document.getElementById("div5");
div.style.opacity = elem.value;
}
</script>
<table>
<tr><td width="180" height="140">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div id="div5"></div>
</td>
<td>
<input id="opak9" name="opakSec" type="radio" value="0.9" checked="checked" onChange="opakAyarla(this)"/>
<label for="opak9">opacity: 0.9</label><br/>
<input id="opak8" name="opakSec" type="radio" value="0.8" onChange="opakAyarla(this)"/>
<label for="opak8">opacity: 0.8</label><br/>
<input id="opak7" name="opakSec" type="radio" value="0.7" onChange="opakAyarla(this)"/>
<label for="opak7">opacity: 0.7</label><br/>
<input id="opak6" name="opakSec" type="radio" value="0.6" onChange="opakAyarla(this)"/>
<label for="opak6">opacity: 0.6</label><br/>
<input id="opak5" name="opakSec" type="radio" value="0.5" onChange="opakAyarla(this)"/>
<label for="opak5">opacity: 0.5</label><br/>
<input id="opak4" name="opakSec" type="radio" value="0.4" onChange="opakAyarla(this)"/>
<label for="opak4">opacity: 0.4</label><br/>
<input id="opak3" name="opakSec" type="radio" value="0.3" onChange="opakAyarla(this)"/>
<label for="opak3">opacity: 0.3</label><br/>
<input id="opak2" name="opakSec" type="radio" value="0.2" onChange="opakAyarla(this)"/>
<label for="opak2">opacity: 0.2</label><br/>
<input id="opak1" name="opakSec" type="radio" value="0.1" onChange="opakAyarla(this)"/>
<label for="opak1">opacity: 0.1</label><br/>
<input id="opak0" name="opakSec" type="radio" value="0.0" onChange="opakAyarla(this)"/>
<label for="opak0">opacity: 0.0</label>
</td></tr></table>
Test Edin