Three examples of blur background effects using CSS3

Let’s not start with the introduction and get straight to the point.
The normal background blur effect is as follows:

Use properties:

filter:(2px)

Normal background blur

For the sake of aesthetics, the text in front of the background cannot be blurred, and the filter attribute will cause the entire div's descendants to have white edges. In other words, this effect cannot be achieved. What should I do? We can use pseudo-elements, which will also solve the white border problem.

Implementation ideas:
Set the background in the parent container and use relative positioning to facilitate pseudo-element overlap. In :after, you only need to inherit the background, set the blur, and absolutely position it to cover the parent element. This way child elements in the parent container are not affected by the blur. Because the blurriness of a pseudo-element cannot be inherited by the children of the parent element.
Having said so much, let's refresh our minds with some code.

Simple html layout:

<div class="bg">
   <div class="drag">like window</div>
</div>

CSS:

/*Blurred background*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(2px);
    z-index: 2;
}
.drag{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height:200px;
    text-align: center;

    z-index:11;
}

Of course, after looking at the code above, you can find that the child elements under the parent container also need to use absolute positioning, but this will not affect the subsequent layout, so please feel free to use it (if you have any questions, you can ask the blogger for help~). It should be noted that z-index is used to determine the hierarchical relationship, and the child element (that is, drag here) must be ensured to be on the top. Otherwise the text of the child elements will not appear.

The code above also has a method to ensure that the div is centered. Careful students should have noticed it! This should be a relatively simple method to center without using flex layout.

So what is the effect of writing code like this?

Background partial blur

Compared to the previous effect, partial background blur is relatively simple. At this time, the parent element does not need to set the pseudo-element to be blurred. Directly analogous to the above code, the child element is blurred, but the descendants of the child element may not be blurred (note that the solution is as described in the previous effect).
The HTML layout has changed slightly:

<div class="bg">
   <div class="drag">
        <div>like window</div>
   </div>
</div>

The css code is as follows: (please pay attention to the comparison)

/*Partial background blur*/
.bg{
    width:100%;
    height:100%;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.drag{
    margin:100px auto;
    width:200px;
    height:200px;

    background: inherit;

    position: relative;
}
.drag >div{
    width:100%;
    height: 100%;
    text-align: center;
    line-height:200px;
    position: absolute;
    left:0;
    top:0;
    z-index: 11;
}
.drag:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(15px);/*To make the blur more obvious, increase the blur*/
    z-index: 2;
}

The effect is as follows:

Background is partially clear

The effect of making the background partially clear is neither simple nor difficult. The key is to apply the background:inherit attribute properly. You can’t use transform here to make it vertically centered, so let’s choose flex layout. If the transform attribute is used here, the background will also be offset. This way there will be no local clarity effect.
The html layout remains unchanged.
Pay attention to the changes in css:

/*Partial background is clear*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(3px);
    z-index: 1;
}
.drag{
    position: absolute;
    left:40%;
    top:30%;
    /*transform: translate(-50%,-50%);*/
    width:200px;
    height:200px;
    text-align: center;

    background: inherit;
    z-index:11;

    box-shadow: 0 0 10px 6px rgba(0,0,0,.5);
}

Effect display:

This concludes this article about three examples of how to achieve blurred background effects with CSS3. For more relevant CSS3 blurred background content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!