模糊背后的div CSS

我在一个网站上工作，我需要蓝色背景的背后，我无法找到一种方法来使用CSS。模糊背后的div CSS

我发现了一篇文章展示了如何去做，但我无法准确地复制它。

下面是文章：https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

这里是我的网页：http://biolinks.redxte.ch/blur

如果有人可以让我知道我做错了什么，将是巨大的，谢谢。

来源

2017-03-07 RedXTech

你好，我再次。我只是在仔细阅读过去的小提琴，我发现这个https://jsfiddle.net/RachGal/81v5ge58/这是一个模糊背景但不是文字的悬停事物。看看它，你可能会发现一些可能有用的东西 –

你太亲近了！

上.name-container删除position: relative并将其添加到.head

更新：

删除.name-bg，（使用display: none如果neccessary），并改变.name z索引为1或更大。然后添加此代码。

.name:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    background-position: center -373px; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    filter: blur(10px); 
    border-radius: 8px; 
    z-index: -1; 
} 

.head, .name:after { 
    background-size: 1500px auto; /* Really, this */ 
    background-position: center; /* and this is the only code .head needs */ 
    background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg'); 
}

注意：由于该网站使用，你必须设置一个绝对background-size不幸。另外，随着@media代码的使用，您需要修改代码。

希望它有帮助！

来源

2017-03-07 20:49:07

这很有用，但并不完全适合我需要的功能。这会使整个背景变得模糊，而不仅仅是'.name' div背后的部分。 – RedXTech

@RedXTech我已经在您的网站上测试过它，并让它工作。你能够吗？ –

将模糊滤镜添加到#pp css（在.name类中使用的img id），并将其从名称-bg（它影响整个背景）中删除。这应该对你更好。 10px可能有点多。我预览它（见图片）

希望这有助于

编辑：

你的代码仔细看看后（并看到你的评论，澄清了问题），你已经在名称容器周围将margin设置为0，并且name-bg class已被调整大小（它正在通过添加顶部/右/底部/左侧坐标进行更改）我将顶部/右侧/左侧/底部调整为2或-2（见小提琴），这减少了背景div的大小。我也改变了定位到relative，所以当调整大小时，它仍然会出现在中间。

https://jsfiddle.net/RachGal/rhav95o1/：小提琴

我觉得这是更接近你在找什么。

来源

2017-03-08 02:05:37

在第一张图片中，我忘了关闭webkit模糊..实际上看起来不错 –

这很整洁，但我需要的是背景图片在.name div背后模糊，以及其他地方：/ – RedXTech

感谢所有的努力，但我并没有真正看到那个小提琴上的模糊。 – RedXTech

模糊背后的div CSS

回答

相关问题