使用不帶覆蓋層的CSS的色調圖像

是否可以使用CSS在WebKit瀏覽器中沒有覆蓋層的情況下使用特定顏色着色圖像？使用不帶覆蓋層的CSS的色調圖像

失敗的嘗試

管理進行着色圖像棕褐色或使用hue-rotate任意顏色，但無法找到一種方法用特定的顏色來着色它。
創建「色調」SVG過濾器並使用-webkit-filter: url(#tint)調用它不適用於Chrome。
opacity/box-shadow css屬性與drop-shadow/opacity過濾器的所有可能組合不會產生所需的效果。

理念

給定一個顏色，是不是有可能的HSB過濾器（hue-rotate，saturation，brightness）產生的色彩相結合？

來源

2012-09-22 hpique

+16

動態演示中，我不知道爲什麼懷舊得到了皇家的待遇。 – hpique

我已經看到了幾種解決方案，它們依賴於canvas和javascript來完成......這並不理想。 –

你在問題中用'-webkit-filter'犯了一個錯字。可能很好地確認你沒有在你的代碼中犯同樣的錯字？ ;-) – Spudley

最終它會使用着色器。查看W3C關於過濾器的文檔。

目前，什麼是可能的，例如是：

-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/ 
-webkit-filter: brightness(50%);

見

更新：

的Adobe發佈了基於HTML5 CSS Filter Labs與支持的瀏覽器爲custom filters（着色器）支持：

enter image description here

來源

2012-09-22 18:28:25

着色器已被棄用 - 習慣於使用過濾器做到這一點！ –

雖然沒有獨立的色彩過濾器你可以通過現有濾鏡的組合來製作一種沒有陰影的濾鏡。

結合棕褐色，以統一的顏色，然後色調旋轉到你想讓它與

-webkit-filter: sepia(90%) hue-rotate(90deg);

我用邊框與我的色彩的阿爾法值，其真正的覆蓋是帶顏色的，但沒有按」顏色當其他瀏覽器獲得這些過濾器時，可以使用任何額外的DOM元素，使其轉換爲棕褐色+色調 - 旋轉更簡單。

來源

2013-10-24 10:28:57 krs

色相旋轉差不多 - 它在飽和色彩上做了非常不準確的工作 - 尤其是黃色，因爲它實際上在RGB空間中做了很差的近似，而不是真正的HSL空間。 –

除非我錯過了一些東西，否則這對於白底黑白圖像不起作用，因爲棕褐色和色調旋轉對白色沒有太大影響。 –

@GrantBirchmeier'亮度（50％）;'將白色變爲灰色。 – GKFX

然後襯墊如何？

HTML：

<span class="tint"><img src="..." /></span>

CSS：

.tint { background-color:red; display:inline-block; } 
.tint img { opacity:0.8 }

扭捏的顏色和透明度，如你所願。對於具有透明度的圖像並不真正起作用。

來源

2013-11-20 16:04:17 DanMan

box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;

在任何顏色（而不是未到處支持深褐色或旋轉過濾器）甲色調可能是由插入箱陰影來實現，在適當的大小。

來源

2014-06-10 20:21:22 Frevd

請在您的答案中添加一些解釋！ –

如果這是你的答案，它應該是一個評論。 – ChiefTwoPencils

你走了，希望它能讓你快樂 – Frevd

這可以使用SVG過濾器而不必使用着色器。你可以通過-webkit-filter：「url（#yourfilterID）」等語法將它用作CSS過濾器（儘管它在IE中不起作用）。

<svg width="800px" height="600px" viewbox="0 0 800 600"> 
    <defs> 
     <filter id="f1" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"> 
     <feColorMatrix id="tinter" type="matrix" values=".6 .6 .6 0 0 
                  .2 .2 .2 0 0 
                  .0 .0 .0 0 0 
                  0 0 0 1 0"/> 
     </filter>  
    </defs> 

<image x="0" y="0" width="550" height="370" preserveAspectRatio="true" 
    filter="url(#tinter)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/> 
</svg>

在http://codepen.io/mullany/details/baLkH/

來源

2015-06-20 01:09:17

爲什麼沒有這個upvoted更多？ @Michael Mullany有沒有將十六進制顏色轉換爲矩陣值的方法？ – dopatraman

矩陣值在0到1的範圍內 - 所以只需取你的十六進制值並用255（或FF）除以得到你想要的值。例如，如果你想100％的紅色，那麼第一行將是1 1 1 0 0.如果你想要50％的綠色，第二行將是0.5 0.5 0.5 0 0等。 –

我明白前4列是RGBA，但是......第5列是什麼？ – dopatraman

使用不帶覆蓋層的CSS的色調圖像

回答

相關問題