综合编程

Blurring a div blurs other divs

微信扫一扫,分享到朋友圈

Blurring a div blurs other divs
0

When I blur a div, other divs near to it also get blurred and semi-transparent at the edge near the blurred div.

Here’s a demonstration: http://codepen.io/anon/pen/ezpdy

How can I prevent other divs from getting blurred?

Problem courtesy of: a_rahmanshah

Solution

The simplest solution is to place the .background-image
behind all other elements. http://codepen.io/anon/pen/driDz

.background-image {
   z-index: -1;
}

Or put the #test
above the .background-image

#test {
  position: relative;
  z-index: 2;
}

Both ways work fine.

Solution courtesy of: Jose Rui Santos

Discussion

#test
isn’t getting blurred. Because .background-image
is blurred by 5px
, it affects 5px
around it.

Discussion courtesy of: Mooseman

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...


微信扫一扫,分享到朋友圈

Blurring a div blurs other divs
0

CSS3 Recipes

Moving to TLSv1.2 or newer: Nginx, Apache, Postfix, Dovecot

上一篇

SwiftUI By Example 笔记

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Blurring a div blurs other divs

长按储存图像,分享给朋友