我的问题是，如何模糊图像的某些部分？使图像在某些部分模糊

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

相关问题