執行個體詳解CSS濾鏡(12)alpha屬性

來源:互聯網
上載者:User
alpha是來設定透明度的。先來看一下它的表達格式:
  filter:alpha(opacity=opcity,finishopacity=finishopacity,
  style=style,startX=startX,startY=startY,finishX=finishX,
  finishY=finishY)
  哇,怎麼這麼長。是啊,不過這些參數都各有其用。
  Opacity代表透明度等級,可選值從0到100,0代表完全透明,100代表完全不透明。
 Style參數指定了透明地區的形狀特徵。其中0代表統一形狀;1代表線形;2代表放射狀;3代表長方形。
  Finishopacity是一個可選項,用來設定結束時的透明度,從而達到一種漸層效果,它的值也是從0到100。
 StartX和StartY代表漸層透明效果的開始座標,finishX和finishY代表漸層透明效果的結束座標。
  從上面講的我們可以看出,如果不設定透明漸層效果,那麼只需設定opacity這一個參數就可以了。說了這麼多,我們來看一個執行個體吧(見下圖):
  實現上面這種效果的代碼如下:
  <html>
  <head>
  <title>alpha</title>
  <style>//*定義CSS樣式*//
  <!--
  div{position:absolute; left:50;top:70; width:150; }
  //*定義DIV地區內的樣式(位置為絕對位置,left、top、width的座標)*//
    img{position:absolute;top:20;left:40;
  filter:alpha(opacity=80)}
  //*定義圖片的樣式,絕對位置,濾鏡屬性是透明度為80*//
  -->
  </style>
  </head>
  <body>
  <div>
  <p style=“font-size:48;font-weight:bold;color:red;”>
  Beautiful </p>//*定義字型屬性,前景色彩為紅色*//
  </div>
  <p><img src=“ss01076.jpg”> </p>
  //*匯入一張圖片*//
  </body>
  </html>
  如果在上面的代碼中稍做改動,則將產生另外多種效果。我們只修改img的樣式屬性,把head中的Img樣式屬性代碼改為如下所示:
  img{position:absolute;top:20;left:40;
  filter:alpha(opacity=0,finishopacity=100,
  style=1,startx=0,starty=85,finishx=150,finishy=85);}
  //*設定透明漸層效果,起始座標,終止漸層座標,並設定透明樣式值(style=1)為   線形*//
  這段代碼產生的效果如左下圖所示,右面的兩幅圖分別是把Alpha中的Style參數值為2和3後的效果,點擊縮圖可放大。
  以上是CSS的Alpha濾鏡屬性的應用,具體應用還需要您自己找個例子練一練。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.