myNotlar Logo

opacity


Firefox Opera

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









İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |