Detailed explanation of the application and difference between filter attribute and backdrop-filter in CSS

Detailed explanation of the application and difference between filter attribute and backdrop-filter in CSS

There are some differences between filter and backdrop-filter:

  • Filter not only works on the current element, but also on descendant elements. It has no effect on an element with an empty background.
  • backdrop-filter blurs the bottom elements through the layer
  • The backdrop-filter property lets you add a graphical effect (such as a blur or color shift) to the area behind an element. Because it applies to all elements behind the element, in order to see the effect, you must make the element or its background at least partially transparent.
  • backdrop-filter currently has poor compatibility, especially on Android mobile devices.

Filter Attributes

Let’s talk about the filter attribute first. The filter attribute in CSS3 is simple, easy to use and powerful. These effects can be applied to images to achieve some unique special effects. And currently all mainstream browsers already support this attribute.

From the above picture, we can see that the compatibility of most browsers is good.

Let's look at it directly with code.

body {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.img {
  width: 500px;
  height: 500px;
}
<body>
    <img src="./img/kyoto.jpg" class="img filter">
</body>

We define a photo in the center of the web page without doing any processing.

This is the effect of the original image.

Next, let's look at some of the more important properties of the filter.

opacity

opacity represents transparency, and the value is a decimal between 0 and 1. The larger the value, the lower the transparency.

.filter{
  filter: opacity(.3);
}

As shown in the following figure:

blur

blur can set the image to use Gaussian blur effect, the unit value is px. The so-called Gaussian blur refers to the convolution of an image with the probability density function of a two-dimensional Gaussian distribution.

To put it simply: Gaussian blur is often used to simulate the effect of objects becoming farther and faster in the human eye. In photo processing, we often apply Gaussian blur to the background to make it seem farther away, thereby highlighting the people or objects in the foreground. Some so-called "shoot first, focus later" techniques also use the Gaussian blur effect. If you want to create the effect of a rapidly moving viewpoint, you can also use Gaussian blur on the background.

.filter {
  filter: blur(2px);
}

invert

invert can set the inverted color, the value is a decimal between 0-1.

.filter {
  filter: invert(1);
}

saturate

Saturate can set the saturation of the photo. The value range can be a number. The default value is 1, which means 100%.

.filter {
  filter: saturate(5);
}

For example, here I set the saturation to 500%, as shown below:

grayscale

Grayscale represents grayscale, and its value is between 0 and 1.

.filter {
  filter: grayscale(1);
}

The picture below shows the effect when grayscale is 1, that is, the grayscale is 100%.

In addition, if there is no value in the effect parameter, it will default to 1, which is 100%, as shown in the following settings.

.filter {
  filter: grayscale();
}

sepia

Sepia represents the brown color of the photo, similar to the nostalgic effect in most photo beautification software. The value is also 0-1, the same as grayscale.

.filter {
  filter: sepia(1);
}

hue-rotate

Hue-rotate is used to change the hue of the image. The default value is 0deg and the value is angle.

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

Hue-rotate is usually used with CSS animation to present different effects. For example, in the battery charging animation, as the height moves up the vertical axis, the hue-rotate value gradually changes. Since we cannot upload git images here, we can only see static images:

brightness

brightness can change the brightness of the image. The default value is 100%, which is 1.

.filter {
   filter: brightness(2);
}

contrast

Contrast stands for contrast. The value of this attribute is similar to saturation, and the value is also a number.

.filter {
  filter:contrast(2.5);
}

Here we demonstrate the effect when the contrast is 250%, as shown below:

drop-shadow

The drop-shadow property is similar to box-shadow and adds shadows to images.

.filter {
  filter: drop-shadow(20px 20px 10px 20px #000) /**Horizontal shadow position, vertical shadow position, blur distance, shadow color**/
}

backdrop-filter properties

Let's look back at the following features of the backdrop-filter attribute

  • backdrop-filter blurs the bottom elements through the layer
  • The backdrop-filter property lets you add a graphical effect (such as a blur or color shift) to the area behind an element. Because it applies to all elements behind the element, in order to see the effect, you must make the element or its background at least partially transparent.
  • backdrop-filter currently has poor compatibility, especially on Android mobile devices.

The above is not easy to understand just by looking at the text, so I will go directly to the code:

<div class="container">
  <div class="content"></div>
  <div class="filter">
    Is it possible to sit in a place that is consectetur, adipisicing elit. Possimus voluptatem velit quod placeat?
    Cupiditate,
    The corpora, and the temporal laudant, which constituted the labor of the distinct inventors, are the very things which are said to be true.
    ad
  </div>
</div>

We define a container element div, whose child elements are two div elements: content and filter.

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
}

.content {
  position: absolute;
  bottom: 40%;
  width: 300px;
  height: 300px;
  background-color: blueviolet;
}

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  font-size: 32px;
  z-index: 20;
}

With the above elements, we can get the following layout:

At this time, we change the filter element to

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  filter: blur(5px);
  z-index: 20;
  font-size: 32px;
}

From the code, we added filter: blur(5px). As shown in the figure below, we can see that the filter element div and the text content in it are blurred.

But if you modify the style as follows

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  backdrop-filter: blur(5px);
  z-index: 20;
  font-size: 32px;

}

Using the backdrop-filter: blur(5px) element, we get the following layout:

We found that only the filter element DIV was blurred, while the sub-content text was not affected at all.

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: chocolate;
  backdrop-filter: blur(5px);
  z-index: 20;
  font-size: 32px;

}

However, if we set the background color of the filter element to chocolate, the blurring effect will be almost invisible.

Or, we remove the background color of the content element DIV.

.content {
  position: absolute;
  bottom: 40%;
  width: 300px;
  height: 300px;
}

That's why, in order to see the effect, the element or its background must be made at least partially transparent.

We found that the backdrop-filter property can only be effective on some of the latest versions of browsers, so at present, the compatibility of this property is poor.

This is the end of this article about the application and difference of filter attribute and backdrop-filter in CSS. For more relevant CSS filter and backdrop-filter content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Detailed explanation of common template commands in docker-compose.yml files

>>:  Detailed explanation of JQuery selector

Recommend

WeChat applet implements a simple calculator

A simple calculator written in WeChat applet for ...

React+Amap obtains latitude and longitude in real time and locates the address

Table of contents 1. Initialize the map 2. Map Po...

JS uses canvas technology to imitate echarts bar chart

Canvas is a new tag in HTML5. You can use js to o...

A brief analysis of the difference between ref and toRef in Vue3

1. ref is copied, the view will be updated If you...

Vue sample code for easily implementing virtual scrolling

Table of contents Preface Rolling principle accom...

What are the core modules of node.js

Table of contents Global Object Global objects an...

How to assign default values ​​to fields when querying MySQL

need When querying a field, you need to give the ...

Some suggestions for HTML beginners and novices, experts can ignore them

Feelings: I am a backend developer. Sometimes when...

How to change fixed positioning of child elements to absolute positioning by CSS3 transform

This article introduces the method of using CSS3 ...

Tutorial on configuring and using i3 window manager in Linux

In this article, I will show you how to install a...

MySQL installation and configuration methods and precautions under Windows platform

2.1、msi installation package 2.1.1、Installation I...

A small introduction to the use of position in HTML

I just learned some html yesterday, and I couldn&#...

How to add color mask to background image in CSS3

Some time ago, during development, I encountered ...

Nginx local directory mapping implementation code example

Sometimes you need to access some static resource...

Creating a Secondary Menu Using JavaScript

This article example shares the specific code of ...