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 - 在背景大小級別模糊背景而不是容器

回答

相關問題