foreword
When developing WeChat applets, you will also encounter some style requirements that are the same as those in front-end development. The similarities between the two are very high. Take style-related requirements as an example, it can be said that they are exactly the same operations. Then this article will share a requirement for realizing the Gaussian blur effect. The operation of the WeChat applet is the same as that of the front end. Here we will only introduce the realization of the Gaussian blur effect by the WeChat applet.
First of all, let’s understand the Gaussian blur effect (commonly known as the frosted glass effect). The Gaussian blur effect is a common effect. In the front-end development process (including WeChat applet development) to set the Gaussian blur effect is mainly to use the filter and backdrop attributes directly in CSS can achieve this effect.
One, filter
The Gaussian blur effect is achieved by directly using the filter in CSS. In fact, the filter is a kind of "false blur", because one layer is needed as the background and the filter property is used to achieve the blur effect, and another layer (needs to be set above the background layer) A translucent background color, the combination of the two can achieve the blur effect.
A specific example is as follows:
.matter-view {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
opacity: 0.6;
filter: alpha(opacity=60); //设置filter属性
}
2. backdrop-filter
By using backdrop-filter directly in CSS to set the Gaussian blur effect, the backdrop-filter attribute actually allows developers to add graphic effects to the area behind an element, because it applies to all elements behind the element. In order to be able to see the effect, you must Make an element or background partially transparent.
The method of matching the background color by using backdrop-filter is as follows:
Set the backdrop-filter: blur() property, and combine background: rgba() to achieve the Gaussian blur effect of the button.
Advantages of using backdrop-filter:
- This method of using backdrop-filter can save the step of setting an after pseudo-class to blur the background, which is simple and convenient;
- backdrop-filter : blur() automatically blurs the background behind the element without specifying a fixed background for Gaussian blur.
An example of setting the css style to Gaussian blur effect is as follows:
.end-view {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: rgba(255,255,255,0.5); //设置半透明背景
backdrop-filter: blur(2px); //设置backdrop-filter属性
text-align: center;
padding: 32rpx 0;
}
.save-btn {
width: 585rpx;
height: 80rpx;
background: #49b454;
border-radius: 40px;
margin-left: 50%;
transform: translateX(-50%);
}
The effect diagram is as follows:
at last
Through the realization of the Gaussian blur effect (frosted glass effect) in the development of WeChat applets introduced above, similar needs can be solved in the development of WeChat applets in the future. This is also a necessary function in the development process. Especially for junior developers, they should master the use of these situations, so I won't repeat them here. The above is the whole content of this chapter, welcome to pay attention to the third treasurer!