Use css filter:blur to achieve the blur effect of images (code example)

不言
Release: 2018-11-07 14:22:55
Original
4368 people have browsed it

The content of this article is about using CSS filters to achieve the blur effect of images. Friends in need can refer to it. Without further ado, let’s take a look at the main text.

I recently encountered the problem of filter:blur in css. First, let us take a look at an image on the page, as shown below:

HTML:

<div class="imageContainer">
<img  src="image/1.jpg" alt="Use css filter:blur to achieve the blur effect of images (code example)" >
</div>
Copy after login

CSS:

.imageContainer {
    border: solid 5px black;
    width: 1024px;
    height: 768px;
    }
Copy after login

Use css filter:blur to achieve the blur effect of images (code example)

Now, let’s apply a nice blur effect:

img {
-webkit-filter: blur(30px);
}
Copy after login

The effect is as follows:

Use css filter:blur to achieve the blur effect of images (code example)

Observed that the image is blurred beyond the borders of its container and a "glow" effect appears between the blurred image and the black border, now let's fix this issue.

Solution:

.imageContainer {
overflow: hidden;
}    
img {
+transform:scale(1.1);
}
Copy after login

The effect is as follows:

Use css filter:blur to achieve the blur effect of images (code example)


The above is the detailed content of Use css filter:blur to achieve the blur effect of images (code example). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template