定义拦截器不过滤css_CSS过滤器

定义拦截器不过滤css

Filters allow us to perform operations on elements.

过滤器使我们可以对元素执行操作。

Things you normally do with Photoshop or other photo editing software, like changing the opacity or the brightness, and more.

通常使用Photoshop或其他照片编辑软件执行的操作，例如更改不透明度或亮度等等。

You use the filter property. Here’s an example of it applied on an image, but this property can be used on any element:

您使用filter属性。 这是一个应用于图像的示例，但是此属性可以在任何元素上使用：

img {
  filter: <something>;
}

You can use various values here:

您可以在此处使用各种值：

• blur()

  blur()

• brightness()

  brightness()

• contrast()

  contrast()

• drop-shadow()

  drop-shadow()

• grayscale()

  grayscale()

• hue-rotate()

  hue-rotate()

• invert()

  invert()

• opacity()

  opacity()

• sepia()

  sepia()

• saturate()

  saturate()

• url()

  url()

Notice the parentheses after each option, because they all require a parameter.

注意每个选项后的括号，因为它们都需要一个参数。

For example:

例如：

img {
  filter: opacity(0.5);
}

means the image will be 50% transparent, because opacity() takes one value from 0 to 1, or a percentage.

表示图像将是50％透明的，因为opacity()取0到1之间的一个值或一个百分比。

You can also apply multiple filters at once:

您还可以一次应用多个过滤器：

img {
  filter: opacity(0.5) blur(2px);
}

Let’s now talk about each filter in details.

现在让我们详细讨论每个过滤器。

blur() (blur())

Blurs an element content. You pass it a value, expressed in px or em or rem that will be used to determine the blur radius.

模糊元素内容。 您为其传递一个值，以px或em或rem表示，该值将用于确定模糊半径。

Example:

例：

img {
  filter: blur(4px);
}

opacity() (opacity())

opacity() takes one value from 0 to 1, or a percentage, and determines the image transparency based on it.

opacity()取0到1之间的一个值或一个百分比，然后根据该值确定图像的透明度。

0, or 0%, means totally transparent. 1, or 100%, or higher, means totally visible.

0或0%表示完全透明。 1或100%或更高意味着完全可见。

Example:

例：

img {
  filter: opacity(0.5);
}

CSS also has an opacity property. filter however can be hardware accelerated, depending on the implementation, so this should be the preferred method.

CSS还具有opacity属性。 但是，根据实现的不同， filter可以通过硬件加速，因此这应该是首选方法。

drop-shadow() (drop-shadow())

drop-shadow() shows a shadow behind the element, which follows the alpha channel. This means that if you have a transparent image, you get a shadow applied to the image shape, not the image box. If the image does not have an alpha channel, the shadow will be applied to the entire image box.

drop-shadow()在元素后面显示阴影，该阴影跟随alpha通道。 这意味着，如果您有透明图像，则会将阴影应用于图像形状，而不是图像框。 如果图像没有Alpha通道，则阴影将应用于整个图像框。

It accepts a minimum of 2 parameters, up to 5:

它至少接受2个参数，最多5个：

• offset-x sets the horizontal offset. Can be negative.

  offset-x设置水平偏移。 可以为负。

• offset-y sets the vertical offset. Can be negative.

  offset-y设置垂直偏移。 可以为负。

• blur-radius, optional, sets the blur radius for the shadow. It defaults to 0, no blur.

  blur-radius ，可选，设置阴影的模糊半径。 默认为0，无模糊。

• spread-radius, optional, sets the spread radius. Expressed in px, rem or em

  spread-radius ，可选，设置扩展半径。 以px ， rem或em

• color, optional, sets the color of the shadow.

  color (可选)设置阴影的颜色。

You can set the color without setting the spread radius or blur radius. CSS understands the value is a color and not a length value.

您可以设置颜色而无需设置扩展半径或模糊半径。 CSS知道该值是颜色而不是长度值。

Example:

例：

img {
  filter: drop-shadow(10px 10px 5px orange);
}

img {
  filter: drop-shadow(10px 10px orange);
}

img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}

grayscale() (grayscale())

Make the element have a gray color.

使元素具有灰色。

You pass one value from 0 to 1, or from 0% to 100%, where 1 and 100% mean completely gray, and 0 or 0% mean the image is not touched, and the original colors remain.

您从0到1，或从0％到100％传递一个值，其中1和100％表示完全灰色，0或0％表示未触摸图像，并且保留了原始颜色。

Example:

例：

img {
  filter: grayscale(50%);
}

sepia() (sepia())

Make the element have a sepia color.

使元素具有棕褐色的颜色。

You pass one value from 0 to 1, or from 0% to 100%, where 1 and 100% mean completely sepia, and 0 or 0% mean the image is not touched, and the original colors remain.

您从0到1或从0％到100％传递一个值，其中1和100％表示完全棕褐色，0或0％表示未触摸图像，并且保留了原始颜色。

Example:

例：

img {
  filter: sepia(50%);
}

invert() (invert())

Invert the colors of an element. Inverting a color means looking up the opposite of a color in the HSL color wheel. Just search “color wheel” in Google if you have no idea what does that means. For example, the opposite of yellow is blue, the opposite of red is cyan. Every single color has an opposite.

反转元素的颜色。 反转颜色意味着在HSL色轮中查找与颜色相反的颜色。 如果您不知道那是什么意思，只需在Google中搜索“色轮”即可。 例如，黄色的反面是蓝色，红色的反面是青色。 每一种颜色都有相反的含义。

You pass a number, from 0 to 1 or from 0% to 100%, that determines the amount of inversion. 1 or 100% means full inversion, 0 or 0% means no inversion.

您传递一个从0到1或从0％到100％的数字，该数字确定反转的数量。 1或100％表示完全反转，0或0％表示没有反转。

0.5 or 50% will always render a 50% gray color, because you always end up in the middle of the wheel.

0.5或50％始终会呈现50％的灰色，因为您总是在转轮中间。

Example:

例：

img {
  filter: invert(50%);
}

hue-rotate() (hue-rotate())

The HSL color wheel is represented in degrees. Using hue-rotate() you can rotate the color using a positive or negative rotation.

HSL色轮以度表示。 使用hue-rotate()可以使用正向或负向旋转颜色。

The function accepts a deg value.

该函数接受deg值。

Example:

例：

img {
  filter: hue-rotate(90deg);
}

brightness() (brightness())

Alters the brightness of an element.

更改元素的亮度。

0 or 0% gives a total black element. 1 or 100% gives an unchanged image

0或0％表示总的黑色元素。 1或100％给出的图像不变

Values higher than 1 or 100% make the image brighter up to reaching a total white element.

高于1或100％的值可使图像变亮，直至达到总的白色元素。

Example:

例：

img {
  filter: brightness(50%);
}

contrast() (contrast())

Alters the contrast of an element.

更改元素的对比度。

0 or 0% gives a total gray element. 1 or 100% gives an unchanged image

0或0％给出总的灰色元素。 1或100％给出的图像不变

Values higher than 1 or 100% give more contrast.

高于1或100％的值会提供更大的对比度。

Example:

例：

img {
  filter: contrast(150%);
}

saturate() (saturate())

Alters the saturation of an element.

更改元素的饱和度。

0 or 0% gives a total grayscale element (with less saturation). 1 or 100% gives an unchanged image

0或0％表示总灰度元素(饱和度较小)。 1或100％给出的图像不变

Values higher than 1 or 100% give more saturation.

高于1或100％的值会给出更多的饱和度。

Example:

例：

img {
  filter: saturate();
}

url() (url())

This filter allows to apply a filter defined in an SVG file. You point to the SVG file location.

该过滤器允许应用在SVG文件中定义的过滤器。 您指向SVG文件位置。

Example:

例：

img {
  filter: url(filter.svg);
}

SVG filters are out of the scope of this book, but you can read more on this Smashing Magazine post: https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

SVG过滤器不在本书的讨论范围内，但您可以在Smashing Magazine的这篇文章中了解更多信息： https : //www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

翻译自: https://flaviocopes.com/css-filters/

定义拦截器不过滤css