html - CSS - 在背景大小级别模糊背景而不是容器

Question

我想让背景模糊。但我希望模糊不要应用到 header 上，而是对每个重复的 images

应用模糊

这可能吗？

https://jsfiddle.net/9zphnLn5/

.header {
    width: 100%;
    padding-top: 40px;
    min-height: 135px;
    padding-bottom: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.header:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  background-image:url('https://graph.facebook.com/311194819319371/picture?type=small');
   width: 500px;
   height: 200px;
   -webkit-filter: blur(5px);
  margin:auto;
}

.header > img {
  max-width:300px;
  max-height:150px;
}

<div class="header">

<img src="https://scontent.xx.fbcdn.net/v/t1.0-9/s720x720/18920203_10155138319170250_8020114684159382803_n.jpg?oh=744adfdc78b6581fa999f0c498889e05&amp;oe=599D7A74" alt="Cover picture "></div>

Answer 1

与 background-size你控制大小，如果要重复你使用 background-repeat

制作blur不影响header本身伪必须是在上面，而不是像现在这样下面，使用z-index: -1 ，所以我删除了 z-index .

因为伪有一个位置，而不是static ，header 的任何其他子元素也必须如此, 否则他们最终会在 下面 它，所以在这里我也给了 img position: relative .

.header {
  position: relative;
  width: 100%;
  padding-top: 40px;
  min-height: 200px;
  
  /* added the image here too, so one see it is not blurred */
  background-image: url('https://graph.facebook.com/311194819319371/picture?type=small');
  
  padding-bottom: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.header::before {
  content: "";
  position: absolute;
  left: 10%;
  top: 10%;
  background-image: url('https://graph.facebook.com/311194819319371/picture?type=small');
  background-size: auto 60px;
  background-repeat: repeat;
  width: 80%;
  height: 80%;
  -webkit-filter: blur(5px);
}
.header > img {
  position: relative;
  max-width: 300px;
  max-height: 150px;
}

.header.nr2 {
  margin-top: 20px;
}
.header.nr2::before {
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="header">
  <img src="https://scontent.xx.fbcdn.net/v/t1.0-9/s720x720/18920203_10155138319170250_8020114684159382803_n.jpg?oh=744adfdc78b6581fa999f0c498889e05&amp;oe=599D7A74" alt="Cover picture ">
</div>

<div class="header nr2">
  <img src="https://scontent.xx.fbcdn.net/v/t1.0-9/s720x720/18920203_10155138319170250_8020114684159382803_n.jpg?oh=744adfdc78b6581fa999f0c498889e05&amp;oe=599D7A74" alt="Cover picture ">
</div>