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

Question

我想让背景模糊。但我希望模糊不适用于header，而是模糊每个人重复images

有可能吗？

https://jsfiddle.net/9zphnLn5/

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

你想要的效果在技术上是可行的，但代码不会很漂亮。您可以根据需要添加带有负z-index的position: absolute div和多个单独模糊的图像。

＆＃13;

＆＃13;

.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;
    position: relative;
}
.bg-pics {
  -webkit-filter: blur(5px);
}
.bg-pics-container {
  position: absolute;
  z-index: -1;
  width: 500px;
  height: 200px;
}
.header > img {
  max-width:300px;
  max-height:150px;
}

＆＃13;

<div class="header">
<div class="bg-pics-container">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
<img src="https://graph.facebook.com/311194819319371/picture?type=small" class="bg-pics">
</div>
<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>

＆＃13;

＆＃13;

＆＃13;