How to Keep Edges Sharp When Blurring an Image with CSS3 Filter?-CSS Tutorial-php.cn

How to Keep Edges Sharp When Blurring an Image with CSS3 Filter?

DDD

Release： 2024-11-29 15:24:13

Original

643 people have browsed it

How to Keep Edges Sharp When Blurring an Image with CSS3 Filter?

Keeping Edges Defined with CSS3 Filter Blur

When applying the filter: blur() property to an image using CSS3, the edges of the image can also become blurred. This may not be desirable if you want to retain sharp edges while blurring the rest of the image.

Solution: Negative Margins with Hidden Overflow

To achieve sharp edges while blurring an image, you can enclose it within a

and apply negative margins to the element. This technique involves setting overflow: hidden; on the

, which keeps the blurred image within its boundaries:

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  margin: -5px -10px -10px -5px;
}

div {
  overflow: hidden;
}

Copy after login

This approach produces an output where the image edges remain sharp while the rest of the image is blurred. The negative margins on the element act as a "buffer zone" around the image, ensuring that the blur effect does not extend beyond those boundaries.

Demo:

[Image of a kitten with sharp edges and blurred background]

HTML:

<div>
  <img src="http://placekitten.com/300" />
</div>

Copy after login

The above is the detailed content of How to Keep Edges Sharp When Blurring an Image with CSS3 Filter?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：Why Does `.foo a:link` Override `a:hover` in CSS Specificity? Next article：How to Prevent Flexbox Items from Stretching to Fill Available Space?

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