CSS - Div inside div blur

问题

I have a div inside another div. I want to give the first div a BG and a filter: blur(5px) But, the second div should not be affected I already tried

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

回答1:

You can't do that...what blurs the parent blurs the child....I assume you're just trying to blur the image...right?

You have to use another element (or pseudo-element) to hold the image (or background image) and blur that.

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>

来源：https://stackoverflow.com/questions/36802257/css-div-inside-div-blur