[ CSS ] filter: alpha & opacity

Example 1

<style type="text/css">
div.Five { 
    color: black; 
    background-color: #4caf55; 

    zoom: 1; 
    filter: alpha(opacity=50); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    -khtml-opacity: 0.5; 
    -moz-opacity: 0.5; 
    opacity: 0.5; 
} 
</style>

<div class="Five"> Opacity 0.5 </div>

Opacity 0.5

---

Example 2

<style type="text/css">
div { 
    color: black; 
    background-color: #4caf55; 
    margin: 5px 0; 
    padding: 20px; 
} 

div.Six { 
    zoom: 1; 
    filter: alpha(opacity=60); 
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; 
    -khtml-opacity: 0.6; 
    -moz-opacity: 0.6; 
    opacity: 0.6; 
} 

div.Three { 
    zoom: 1; 
    filter: alpha(opacity=30); 
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; 
    -khtml-opacity: 0.3; 
    -moz-opacity: 0.3; 
    opacity: 0.3; 
} 

div.One { 
    zoom: 1; 
    filter: alpha(opacity=10); 
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)'; 
    -khtml-opacity: 0.1; 
    -moz-opacity: 0.1; 
    opacity: 0.1; 
} 
</style>

<div> opacity 1 </div>
<div class="Six  "> opacity 0.6 </div>
<div class="Three"> opacity 0.3 </div>
<div class="One  "> opacity 0.1 </div>

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

---

Example 3

<style type="text/css">
div.background { 
    width: 260px; 
    height: 270px; 

    border: 2px solid yellow; 
    background: url( "snoopy.png" ) no-repeat center; 
} 

div.textBox { 
    margin: 60% 10px 0 10px; 
    height: 30%; 

    border: 1px solid black; 
    background-color: #ffffff; 

    zoom: 1; 
    filter: alpha(opacity=80); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    -khtml-opacity: 0.4; 
    -moz-opacity: 0.4; 
    opacity: 0.8; 
} 

div.textBox p { 
    margin-top: 12%; 

    color: brown; 
    font: bold 14px/1.2 Tahoma, Geneva, sans-serif; 
    text-align: center; 
} 
</style>

<div class="background">
    <div class="textBox">
        <p>Snoopy & Woodstock</p>
  </div>
</div>

Snoopy & Woodstock

---

Example 4

Add Opacity

 
<button onclick="setOpacity( myTag, 4 )"> Click me </button>

<p id="myTag" style="color: #4caf55; font-size: 16px;"> Add Opacity </p>

<script type="text/javascript">
function setOpacity ( tag, interger ) { 

        var opacity = interger / 10; 
        var filterO = interger * 10; 

        tag.style.zoom = "1"; 
        tag.style.filter = "alpha(opacity=" + filterO + ")"; 
        tag.style.MsFilter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + filterO + ")"; 

        tag.style.KhtmlOpacity = opacity; 
        tag.style.MozOpacity = opacity; 
        tag.style.opacity = opacity; 
} 
</script>
 

---

Example 5

Change Opacity

 
<div id="myDiv" style="color: #4caf55; font-size: 16px;"> Change Opacity </div>

<script type="text/javascript">

var myOpacity = 1; 
var up = true; 

setInterval( changeOpacity, 400 ); 

function changeOpacity () { 
    if ( myOpacity == 10 ) up = false; 
    else if ( myOpacity === 1 ) up = true; 

    if ( up ) myOpacity++; 
    else myOpacity--; 
    
    setOpacity( myDiv, myOpacity ); 
} 

function setOpacity ( tag, interger ) { 
        var opacity = interger / 10; 
        var filterO = interger * 10; 

        tag.style.zoom = "1"; 
        tag.style.filter = "alpha(opacity=" + filterO + ")"; 
        tag.style.MsFilter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + filterO + ")"; 

        tag.style.KhtmlOpacity = opacity; 
        tag.style.MozOpacity = opacity; 
        tag.style.opacity = opacity; 
} 
</script>
 

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
If this article is helpful to you, please click the heart button below~*