我的問題是，如何模糊圖像的某些部分？使圖像在某些部分模糊

Codepen of project（您可以按Change View>Full Page看到這樣一個用戶的筆會。）

它有一個純白色的分度，其背後的背景圖像。

我怎麼可以讓我的.parent有一個透明背景，我的body有模糊背景？

另外我怎樣才能使背景圖像適合屏幕？

如果需要，請在下方留言詢問以獲取更多信息。

^{對不起，如果有關於此的類似帖子。這是我在這個網站上的第二篇文章，所以如果我違反任何規則，我很抱歉。}

來源

2017-10-14 Leed

首先，你在你的CSS拼寫錯誤的「不透明度」。去睡一會！ – kmoser

CodePen

而且我怎麼可能使背景圖像適應屏幕？

使用background-size: cover。

.parent有一個透明背景

只需刪除背景屬性。或使用透明rbga colors。

我body已經模糊背景

由於圖像比背景更小，這已經實現了自然。

我使用filter屬性，該屬性應用於整個元素。因此，您必須使用額外的HTML元素，這可能是pseudo element，但我只是使用了一個div：

HTML：<div class="background"></div>。

CSS：

.background { 
    background: url("https://ak6.picdn.net/shutterstock/videos/10908707/thumb/1.jpg"); 

    /* Apply major the blur filter. Change `1em` for more. */ 
    -webkit-filter: blur(1em); 
    -moz-filter: blur(1em); 
    -o-filter: blur(1em); 
    -ms-filter: blur(1em); 
    filter: blur(1em); 

    /* Make background not move */ 
    position: fixed; 

    /* ...and fill more than entire screen. Removes additional white sides from filter. */ 
    top: -1em; 
    left: -1em; 
    right: -1em; 
    bottom: -1em; 

    /* Make the element appear behind all others */ 
    z-index: -1; 

    /* Make the background cover the entire element */ 
    background-size: cover; 
}

來源

2017-10-14 04:12:34

藍色過濾器只會模糊我的整個家長，而不是圖像。頂端：0等由於某種原因不做任何事情。位置：固定保持在中心，但錯誤我的JavaScript。 – Leed

您是否看到我的CodePen？過濾器使整個元素模糊，包括它的孩子。因此，你必須使用另一個元素。在這種情況下，我添加了'

' –

https://codepen.io/Mike-was-here123/pen/oGWxam如果我離開了電梯。它只是模糊了我的背景，使我的父母變成了藍色，或者圖像變成了一些顏色。 – Leed

使圖像在某些部分模糊

回答

CodePen

相關問題