Home >Web Front-end >CSS Tutorial >How to Blur an Image Without Smudging Edges Using CSS3 Filters?
How to Blur an Image Without Smudging Edges Using CSS3 Filters?
- Susan SarandonOriginal
- 2024-11-21 16:58:09451browse
CSS3 Filter: How to Blur Image Without Smudging Edges
When using CSS3 filters to blur images, the edges of the image may also become blurred. This can be undesirable if you want to maintain crisp edges while creating a blur effect.
To address this issue, a clever solution involves placing the image within a
element and adjusting its margins. By setting the overflow property of the
to hidden, you can crop the image to the desired dimensions.
CSS Code:
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;
}
Explanation:
- The margin property sets the margins around the image, which offsets the blurred edges by an equal amount.
- The overflow: hidden property prevents the image from overflowing beyond the boundaries of the , creating an effect similar to an inset blur.
Example:
[Live Demo](https://jsfiddle.net/NI3c4/)
HTML:
<div> <img src="path/to/image.jpg" /> </div>
Result:
The image is blurred with defined edges, as the blurred area is contained within the
element.The above is the detailed content of How to Blur an Image Without Smudging Edges Using CSS3 Filters?. For more information, please follow other related articles on the PHP Chinese website!
Statement：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