如何降低CSS中的圖像亮度

我想降低CSS中的圖像亮度。我搜索了很多，但我得到的只是如何改變不透明度，但這使得圖像更加明亮。任何人都可以幫助我嗎？如何降低CSS中的圖像亮度

2012-07-18 Shadi

你可以使用屬性不透明度 – 2012-07-18 06:24:25

我用它，但它增加了亮度... – Shadi 2012-07-18 06:27:33

接受的答案效果很好，但也有一個新的CSS標準'過濾器'效果，你會想知道未來。看到我的答案。 – Spudley 2012-07-18 06:56:49

119

您正在查找的功能是filter。這是能夠做到的範圍內的圖像效果，包括亮度：

#myimage { 
    filter: brightness(50%); 
}

你可以找到在這裏一個有用的文章：http://www.html5rocks.com/en/tutorials/filters/understanding-css/

另一個方案：http://davidwalsh.name/css-filters

而且最重要的是，W3C規格：https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

注意這是最近剛剛進入CSS的功能。它是可用的，但大量的瀏覽器目前還不支持它，那些支持它的瀏覽器將需要一個供應商的前綴（即-webkit-filter:,-moz-filter等）。

也可以使用SVG做這種濾鏡效果。 SVG對這些效果的支持已經很好建立並得到廣泛支持（CSS過濾器規格取自現有的SVG規範）

另請注意，這不會與舊版本IE（專有版本filter）儘管我可以預測當新樣式放棄其供應商前綴時名稱空間衝突的問題）。

如果這些都不適合您，您仍然可以使用現有的opacity功能，但不是您想要的方式：只需創建一個具有純黑色的新元素，然後將其放置在圖像頂部，然後使用opacity淡出它。效果將是背後的圖像變暗。

希望有所幫助。

來源

2012-07-18 06:30:16 Spudley

這是正確的答案 – 2015-03-10 04:34:55

-1

像

.classname 
{ 
opacity: 0.5; 
}

來源

2012-07-18 06:25:23

謝謝，但增加亮度不會降低它！ – Shadi 2012-07-18 06:28:09

@shady：增加不透明度，也請訪問鏈接http://imagecss.com/opacity.html – 2012-07-18 06:31:46

這取決於背景顏色。 – zgnilec 2012-07-18 06:34:15

總之，把黑的形象背後，並降低opactiy。您可以通過將圖像包裝在div中，然後降低圖像的不透明度來實現此目的。

例如：

<!DOCTYPE html> 

<style> 
    .img-wrap { 
     background: black; 
     display: inline-block; 
     line-height: 0; 
    } 
     .img-wrap > img { 
      opacity: 0.8; 
     } 
</style> 

<div class="img-wrap"> 
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" /> 
</div>

Here是一個的jsfiddle。

來源

2012-07-18 06:28:43 JL235

這是工作得很好...非常感謝 – Shadi 2012-07-18 06:47:03

OP想要減少亮度，而不是增加它。不透明使圖像看起來更亮，而不是更暗。

您可以通過在圖像上覆蓋黑色div並設置該div的不透明度來實現此目的。

<style> 
#container { 
    position: relative; 
} 
div.overlay { 
    opacity: .9; 
    background-color: black; 
    position: absolute; 
    left: 0; top: 0; height: 256px; width: 256px; 
} 
</style> 

Normal:<br /> 
<img src="http://i.imgur.com/G8eyr.png"> 
<br /> 
Decreased brightness:<br /> 
<div id="container"> 
    <div class="overlay"></div> 
    <img src="http://i.imgur.com/G8eyr.png"> 
</div>

DEMO

來源

2012-07-18 06:33:23 sachleen

1這個想法。 ..：P – 2012-07-18 06:36:02

+22

不透明度不會使任何更亮或更暗。它改變了對象的透明度。無論這是否具有讓某物更亮或更暗的效果取決於您改變不透明度的物品背後的背景顏色。與您所說的相反，如果將其放在黑色背景上，可以通過增加不透明度來使其更暗。黑色背景上的99％透明圖像將顯示爲幾乎黑色。因此，我不明白爲什麼需要單獨的覆蓋div。你可以將它設置在黑色的BG上。例如：http://jsbin.com/isemec/1/edit – NickG 2012-11-02 10:56:03

@NickG我說，假設白色背景。你所做的與我的代碼是一樣的，只有我在圖像上放置了一個半透明的黑色覆蓋層，並且你有一個不透明的黑色背景，頂部有一個半透明的圖像。 – sachleen 2012-11-02 16:31:48

你可以使用：

filter: brightness(50%); 
-webkit-filter: brightness(50%); 
-moz-filter: brightness(50%); 
-o-filter: brightness(50%); 
-ms-filter: brightness(50%);

來源

2013-09-03 00:41:08

這個「讓我們拋出前綴以防萬一」的策略是錯誤的。首先，如果Opera支持它，它將不會有'-o-'（Opera現在使用Webkit/Blink），其次，Firefox直接跳轉到沒有前綴的'filter'，第三，您的訂單錯誤，沒有前綴應該是最後一個，第四，IE的'-ms-filter'的語法是不同的（'progid：DXImageTransform'等），第五，Firefox的語法不同，需要SVG（[docs]]（https：// developer .mozilla.org/en-US/docs/Web/CSS/filter＃brightness（））），第六，新功能不可能以前綴爲前綴，因爲供應商意識到這個想法有多麼糟糕 – 2015-03-19 03:46:31

@CamiloMartin，那麼你應該爲這個問題提供了一個更完整的答案，因爲它還沒有完全回答。 – 2015-03-24 01:48:57

-webkit-filter：brightness（）/ -webkit-filter：contrast（）起作用。對於這個問題，這是一個合適的答案。 – Shilpa 2016-08-24 07:42:07

隨着CSS3，我們可以很容易地調整圖像。但請記住，這不會改變圖像。它只顯示調整後的圖像。

有關更多詳細信息，請參閱以下代碼。

要使一個圖像的灰度：

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

爲了給出褐色外觀：

img { 
    -webkit-filter: sepia(100%); 
    -moz-filter: sepia(100%); 
}

調整亮度：

img { 
    -webkit-filter: brightness(50%); 
    -moz-filter: brightness(50%); 
    }

調節對比度：

img { 
    -webkit-filter: contrast(200%); 
    -moz-filter: contrast(200%);  
}

模糊圖像：

img { 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    }

來源

2014-01-19 12:23:56

請不要在多個問題上發佈完全相同的答案：它可能不適合所有問題或問題是重複的，應該標記/關閉。 – kleopatra 2014-01-19 13:03:17

這將是一個很好的候選人的正確答案。 – 2015-03-24 01:54:15

可以使用CSS過濾器，下面和實施例用於web的試劑盒。請看下面的例子：http://jsfiddle.net/m9sjdbx6/4/

img { -webkit-filter: brightness(0.2);}

來源

2014-10-18 19:00:38 GibboK

我今天找到了。它真的幫助了我。 http://www.propra.nl/playground/css_filters/

所有你需要的是添加到您的CSS樣式：

div {-webkit-filter: brightness(57%)}

來源

2014-12-07 18:04:53

-webkit-filter: brightness(0.50);

我有這個很酷的解決方案： https://jsfiddle.net/yLcd5z0h/

來源

2015-03-28 02:31:47

，如果你試試這個需要將黑色圖像轉換爲白色：

.classname{ 
    filter: brightness(0) invert(1); 
}

來源

2018-02-12 18:53:18 Rizo

如何降低CSS中的圖像亮度

回答

相關問題