Question

我在另一个div里面有一个div。我想给第一个div一个BG和一个过滤器：blur（5px）但是，第二个div不应该受到影响我已经尝试了

.div1 {
    background-image: url("https://myimage.com/image.png");
    filter: blur(5px)
}
.div2 {
    filter: none !important
}

Answer 1

你不能这样做......父母的困惑让孩子模糊了......我猜你只是想模糊图像......对吗？

你必须使用另一个元素（或伪元素）来保存图像（或背景图像）并模糊它。

Codepen Demo

* {
  box-sizing: border-box;
}
.parent {
  position: relative;
  width: 284px;
  height: 196px;
  margin: 1em auto;
  border: 1px solid red;
  padding: 24px;
  overflow: hidden;
  /* clip any overflowing blur */
}
.parent::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://www.fillmurray.com/284/196);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  z-index: -1;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  /* slight overscale so blur reaches all edges */
}
.child {
  width: 200px;
  height: 148px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit.</div>
</div>

CSS - div里面的div模糊

1 个答案: