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

我想让背景模糊。但我想模糊不适用于header，而是对每个人重复模糊imagesCSS - 在背景大小级别模糊背景而不是容器

这可能吗？

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

来源

2017-06-18 Léo Coco

基础上2个中给出答案，这可以在超过1分的方式进行解释，所以你可以显示预期输出的图纸，并解释_repeated images_意思。 – LGSon

我添加了两张照片。第二个是“中间渲染”。第一个是我想要的“最终渲染”。重要的是我想避免手动增加img。 –

更新了我的答案。请对此进行评论以澄清缺失或需要调整的内容 – LGSon

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

为了使blur不会影响header本身伪有在之上，而不是之下，因为它现在，使用z-index: -1，所以我删除了z-index。

由于伪有一个位置，比static等，所以必须还header任何其他子元素，否则会落得它下面，所以在这里我也给了imgposition: 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>

来源

2017-06-18 15:46:50 LGSon

我想要混合使用这两个版本。如果你看看我上传的第二张照片。 “模糊”应用于每个较小的背景图像。在你的第一个例子中，图像被重复，但是模糊被应用到容器的'标题'。 –

@Leo更新...将图片添加到标题，以便您看到它没有模糊...这是你想要的吗？，如果是的话，我会解释我做了什么 – LGSon

@Leo谢谢.. 。用解释更新了我的答案 – LGSon

你想要的效果在技术上是可行的，但代码不会是漂亮。您可以根据需要添加带有负Z指标的position: absolute div以及单独模糊的图像。

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

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

来源

2017-06-18 15:52:41

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

回答

相关问题