CSS3 滤镜(Filters)

CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。

了解CSS3滤镜功能

在本章中，我们将讨论CSS3中引入的滤镜效果，您可以在将滤镜效果绘制到网页上之前，对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。

可以使用CSS3 filter属性将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜功能。使用示例如下：

filter:　blur()　|　brightness()　|　contrast()　|　drop-shadow()　|　grayscale()　|　hue-rotate()　|　invert()　|　opacity()　|　sepia()　|　saturate()　|　url();

警告：任何版本的Internet Explorer当前均不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但是该功能已被弃用。

模糊效果

像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数，则使用值0。

img　{
　　　　-webkit-filter:　blur(5px);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　blur(5px);
}

—上面示例的输出如下所示：

设置图像亮度

brightness()功能可用于设置图像的亮度。的值0%将创建全黑的图像。而值100% ou1使图像不变。其他值是效果的线性乘数。

您还可以将亮度设置为高于100％，这样可以使图像更亮。如果缺少数量参数，则使用值1。不允许使用负值。

img.bright　{
　　　　-webkit-filter:　brightness(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　brightness(200%);
}
img.dark　{
　　　　-webkit-filter:　brightness(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　brightness(50%);
}

—上面示例的输出如下所示：

调整图像对比度

contrast()功能用于调整图像的对比度。的值0%将创建全黑的图像。而值100% ou1保持图像不变。还允许超过100％的值，从而提供对比度较低的结果。如果数量参数缺失或省略，1则使用值。

img.bright　{
　　　　-webkit-filter:　contrast(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　contrast(200%);
}
img.dim　{
　　　　-webkit-filter:　contrast(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　contrast(50%);
}

—上面示例的输出如下所示：

ajouter une ombre à l'image

Vous pouvez utiliser cette fonction drop-La fonction shadow() applique un effet d'ombre sur les images comme Photoshop. Cette fonction est similaire à cellebox-shadowpropriétés.

img　{
　　　　-webkit-filter:　drop-shadow(4px　4px　10px　orange);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　drop-shadow(4px　4px　10px　orange);
}

—上面示例的输出如下所示：

Convertir l'image en niveaux de gris

Utilisez cette fonction grayscale() pour convertir l'image en niveaux de gris. La valeur100% est entièrement en niveaux de gris. La valeur 0% conserve l'image inchangée. Entre les valeurs 0% et100% est le multiplicateur linéaire de l'effet. Si le paramètre 'quantity' est manquant, la valeur 0 est utilisée.

img.complete-gray　{
　　　　-webkit-filter:　grayscale(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　grayscale(100%);
}
img.partial-gray　{
　　　　-webkit-filter:　grayscale(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　grayscale(50%);
}

—上面示例的输出如下所示：

Appliquer une rotation de teinte sur l'image

Ce hue-La fonction rotate() applique une rotation de teinte sur l'image. Les paramètres transmis définissent les degrés autour du cercle de teinte des échantillons d'image qui seront ajustés. La valeur 0deg conserve l'image inchangée. Si l'angle manque39; 'paramètre, 0deg utilise la valeur. Il n'y a pas de valeur maximale, l'effet des valeurs ci-dessus360deg retour à la normale.

img.hue-normal　{
　　　　-webkit-filter:　hue-rotate(150deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　hue-rotate(150deg);
}
img.hue-wrap　{
　　　　-webkit-filter:　hue-rotate(480deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　hue-rotate(480deg);
}

—上面示例的输出如下所示：

Effet de flip

La fonction invert() peut appliquer un effet de flip comme Photoshop sur l'image. 100％ ou1La valeur est complètement inversée. Une valeur de 0% conserve l'entrée inchangée. De 0% à10La valeur entre 0％ est le multiplicateur linéaire de l'effet. Si le paramètre 'amount' est manquant, la valeur 0 est utilisée. Les valeurs négatives ne sont pas autorisées.

img.partially-inverted　{
　　　　-webkit-filter:　invert(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　invert(80%);
}
img.fully-inverted　{
　　　　-webkit-filter:　invert(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　invert(100%);
}

—上面示例的输出如下所示：

Appliquer l'opacité à l'image

La fonction opacity() peut être utilisée pour ajouter de la transparence aux images. La valeur 0% est complètement transparente. La valeur100% ou1conserver l'image inchangée. La valeur 0% est complètement transparente. La valeur100%是在效果线性乘法器。如果缺少' amount'参数，则使用值1。Cette fonction est similaire à celleopacitypropriétés.

img　{
　　　　-webkit-filter:　opacity(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　opacity(80%);
}

—上面示例的输出如下所示：

Appliquer l'effet brunâtre sur l'image

该sepia()功能将图像转换为棕褐色。的值100%或者1完全是深褐色。值0%保留图像不变。之间的值0%并且100%是在效果线性乘法器。如果缺少' amount'参数，则使用值0。

img.complete-sepia　{
　　　　-webkit-filter:　sepia(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(100%);
}
img.partial-sepia　{
　　　　-webkit-filter:　sepia(30%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(30%);
}

—上面示例的输出如下所示：

调整图像的饱和度

该saturate()功能可用于调整图像的饱和度。值0%完全不饱和。值100%保留图像不变。其他值是效果的线性乘数。还允许值超过100％，从而提供超饱和结果。如果缺少'amount '参数，则使用值1。

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

—上面示例的输出如下所示：