首頁 > 開發者 > CSS

CSS濾鏡（網頁灰白、圖片漸層色）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
  • 紀念512，可以使網頁變黑白，可設定如下代碼：

    body
    {
       filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

  • 對img圖片漸層色通過用JavaScript來控制：

　　　　我們在瀏覽時會出現這樣的一個效果：網頁上有一個幾乎透明的映像，當滑鼠移到映像上時，映像慢慢變清晰；當滑鼠移開時，映像又恢複到原來的透明狀態。要實現這個功能，需要使用到CSS的alpha濾鏡，並用javascript來控制alpha濾鏡的Opacity值，首先在網頁中插入一個圖片，並設定alpha濾鏡的opacity值，讓圖片透明，然後給圖片加入onMouseOver和onMouseOut動作。

JavaScript代碼部分
function CssFilter(n)
{
  if(n=="add") //如果傳入的參數為add，則將圖片的不透明度增大
  if(img.filters.alpha.Opacity < 100)
  {
     img.filters.alpha.Opacity += 5;
     setTimeout("CssFilter('add')",20);
  }
  if(n=="dec") //如果傳入的參數為dec，則將圖片的不透明度降低
  if(img.filters.alpha.Opacity > 20)
  {
     img.filters.alpha.Opacity -= 5;
     setTimeout("CssFilter('dec')",20);
  }
}

 

前台圖片HTML部分：

<img src="這裡是圖片路徑" id="img" style="filter:alpha(Opacity=20)" 
     onMouseOver="CssFilter('add')" onMouseOut="CssFilter('dec')" />

 

//以下內容轉載：

在這分享下吧：

CSS裡加：html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

或者：html { FILTER: gray }

在網頁裡加也行，不過頁面多了改動量太大，還是CSS方便

<style. type="text/css">html {    FILTER: gray}</style>

有的時候加上後可能不生效，是因為網站沒有使用最新的網頁標準協議

需要在頁面裡加上：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

網站的FLASH動畫的顏色不能被CSS濾鏡控制，需要在FLASH代碼的<object…>和</object>之間加上：

<param value="false" name="menu"/><param value="opaque" name="wmode"/> 

基本上大功告成…http://www.cnblogs.com/sun8134/archive/2010/04/21/1716794.html

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More