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>
CSS:
.imageContainer { border: solid 5px black; width: 1024px; height: 768px; }
Now, let’s apply a nice blur effect:
img { -webkit-filter: blur(30px); }
The effect is as follows:
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); }
The effect is as follows:
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!