讓圖或顯示區塊變透明

今天記錄這個，讓顯示的元件變透明的語法，IE/Chrome/Firfox都可以用方式。

<style>
.cryst {
    filter:alpha(opacity=50);
    opacity: 0.5;
}
</style>

<img src=http://img0.gmodules.com/logos/esperanto_09-ig.gif class="cryst">

上面定義的部分 filter:alpha(opacity=50);是給 IE 辨識，而opacity則是給支援CSS 3.0的瀏覽器辨識。

原本的圖：
 

效果大約是這樣：



那若要在這邊文章加一個浮水印呢？那調整一下透明度越透明越好，在將位置移到文件正中間：
<style>
.watermark {
        filter:alpha(opacity=5);
        opacity: 0.05;
        position: absolute;
        text-align: center;
        top: 400px;
        width: 100%;
        font-size: 40pt;
        font-weight: bolder;

}
</style>
<div class=watermark>小企鵝的文章，請勿翻印</div>

我們利用一開始說明的透明功能，在調整一下顯示區塊的位置，則變成了浮水印囉！
position 變成 absolute 這樣就可以用絕對位置來放置浮水印
text-align 設 center 將文字置中
top 設 400px 是指將物件的位置由文件上方開始往下算的400px地方
width 設 100% 則是將整個物件寬度設 100%
font-size 和 font-weight 則是設字體大小和字體粗細

小企鵝的文章，請勿翻印

(IE 因為這個部落格的緣故，浮水印效果有點打折）