How to blur the background image with css? Introduction to the method of blurring background images in css-CSS Tutorial-php.cn

How to blur the background image with css? Introduction to the method of blurring background images in css

不言

Release： 2018-10-26 14:27:46

Original

21470 people have browsed it

When I see the blurred background image, I believe many friends will think of using PS to achieve this effect. So, can the blurred effect of the background image be achieved using CSS? The following article will introduce to you how to set the background image blur in CSS.

The filter attribute is used when blurring the background. We use the blur in the filter attribute to set the blurred background.

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300"    style="max-width:90%">
</body>
</html>

Copy after login

The effect of css blur background is as follows:

How to blur the background image with css? Introduction to the method of blurring background images in css

The above method is just simple Use css to blur the background image. Let's take a look at a slightly more complicated method. Of course, we also use the filter attribute.

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
  .mbl {
    width: 20em;
    height: 20em;
    background: url(image/girl.jpg);
    background-size: cover;
    overflow: hidden;
    margin: 30px;
}
.text {
    width: 18em;
    height: 18em;
    margin: 1em;
    background: hsla(0, 0%, 100%, .4);
    color: black;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.text::before {
    position: absolute;
    background: url(image/girl.jpg);
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: &#39;&#39;;
    filter: blur(4px);
    /*    background: rgba(225, 0, 0, 0.5);*/
}
.text p {
   height: inherit;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
</style>
</head>
<body>
<div class="mbl">
        <div class="text">
          <p>图片上面的文字内容</p>
        </div>
    </div>
</body>
</html>

Copy after login

The background image blurring effect is as follows:

How to blur the background image with css? Introduction to the method of blurring background images in css

Explanation: The above code is mainly to set the background color or picture through pseudo elements where the blurred background is to be set, and use regional relative positioning and pseudo element absolute positioning to make the pseudo elements The size is exactly equal to the size of the original area, and then use the blur filter to blur it, and the effect will be like the above.

This article ends here. For more exciting content, you can pay attention to the relevant tutorial columns of the php Chinese website! ! !

The above is the detailed content of How to blur the background image with css? Introduction to the method of blurring background images in css. For more information, please follow other related articles on the PHP Chinese website!