用CSS淡出圖像？

Question

什麼是最好的方式（如果有的話），使圖像出現「變灰」與CSS（即，沒有加載一個單獨的，灰色的圖像版本）？

我的上下文是我有一個表中的行，它們都在最右邊的單元格中都有按鈕，有些行需要看起來比其他行更輕。所以我可以輕鬆地讓字體變得更輕鬆，但是我也想讓圖像更輕，無需管理每個圖像的兩個版本。

Answer 1

是否必須是灰色的？你可以將圖像的不透明度設置得更低（以使其變暗）。或者，您可以創建一個<div>疊加層，並將其設置爲灰色（更改alpha以獲得效果）。

• HTML：

  <div id="wrapper"> 
      <img id="myImage" src="something.jpg" /> 
  </div> 
  

• CSS：

  #myImage { 
      opacity: 0.4; 
      filter: alpha(opacity=40); /* msie */ 
  } 
  
  /* or */ 
  
  #wrapper { 
      opacity: 0.4; 
      filter: alpha(opacity=40); /* msie */ 
      background-color: #000; 
  } 
  

Answer 2

這裏有讓你設置的背景顏色的一個例子。如果你不想使用float，那麼你可能需要手動設置寬度和高度。但即使這依賴於周圍的CSS/HTML。

<style> 
#color { 
    background-color: red; 
    float: left; 
}#opacity { 
    opacity : 0.4; 
    filter: alpha(opacity=40); 
} 
</style> 

<div id="color"> 
    <div id="opacity"> 
    <img src="image.jpg" /> 
    </div> 
</div> 

Answer 3

考慮過濾器：expression是微軟對CSS的擴展，因此它只能在Internet Explorer中工作。如果你想變灰，我建議你使用一些javascript來將它設置爲不透明度爲50％。

http://lyxus.net/mv將是一個很好的開始，因爲它討論了一個與Firefox，Safari，KHTML，Internet Explorer和CSS3兼容的瀏覽器兼容的不透明的 腳本。

您可能還想給它一個灰色邊框。

Answer 4

更好地支持所有瀏覽器：

img.lessOpacity {    
    opacity: 0.4; 
    filter: alpha(opacity=40); 
    zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */ 
} 

Answer 5

如果你不介意使用一些JavaScript，jQuery的fadeTo()作品很好地在每一個瀏覽器我試過。

jQuery(selector).fadeTo(speed, opacity); 

Answer 6

您可以使用rgba()在CSS定義的顏色，而不是rgb()。像這樣： style='background-color: rgba(128,128,128, 0.7);

爲您提供與rgb(128,128,128)相同的顏色，但其透明度爲70％，所以後面的東西只顯示30％。 CSS3，但它在2008年以來在大多數瀏覽器中都可以使用。對不起，我沒有#rrggbb語法。玩數字 - 你可以用白色沖洗，用灰色陰影，任何想要淡化的東西。你可以用半透明的灰色（或任何顏色）製作一個長方形，並將它放在圖像的頂部，也許位置：絕對和高於零的z-索引，然後將其放在你的圖像之前圖像和矩形的默認位置將與圖像的左上角相同。應該管用。

Answer 7

使用CSS3篩選器屬性：

img { 
    -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
      filter: grayscale(100%); 
} 

的瀏覽器的支持是有點糟糕，但它是100％的CSS。對CSS3過濾器屬性的好文章，你可以在這裏找到：http://blog.nmsdvid.com/css-filter-property/

Answer 8

您的位置：

<a href="#"><img src="img.jpg" /></a> 

的CSS灰色：

img{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
    filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */} 

Ungray：

a:hover img{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
    filter: none ; /* IE6-9 */ 
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */ 
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
    } 

我發現它at：http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

編輯： IE10 +不支持DX過濾器，因爲IE9和更早版本已經完成，也不支持灰度過濾器的前綴版本。 您可以修復它，使用一個在下面兩種解決方案：<meta http-equiv="X-UA-Compatible" content="IE=9">

使用在IE10的SVG疊加來完成greyscaling：

1. 設置IE10 +使用下面的元元的頭使用IE9標準模式來再現internet explorer 10 - howto apply grayscale filter?