如何使用CSS将高斯模糊应用于包含文本的DIV。基本上,我想要达到的目标是使盒子具有高斯模糊,但以正常方式显示文本。这可以做到吗?我不知道如何,我一直在尝试,但我不能。如何模糊div(盒)
例如: 就像我有我的div在不透明度:0.75我想我的div是透明的,但高斯模糊,因为在背景中我有一个移动的图像,所以我希望框模糊。
如何使用CSS将高斯模糊应用于包含文本的DIV。基本上,我想要达到的目标是使盒子具有高斯模糊,但以正常方式显示文本。这可以做到吗?我不知道如何,我一直在尝试,但我不能。如何模糊div(盒)
例如: 就像我有我的div在不透明度:0.75我想我的div是透明的,但高斯模糊,因为在背景中我有一个移动的图像,所以我希望框模糊。
应用以下CSS的块:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
但是,此属性只适用于现代的浏览器:compatibility table
嗯,我不认为你可以实现你不用一些额外找什么div
甚至更好的伪元素。我的建议是:
div {
position:relative;
width: 10em;
height: 20em;
padding: 1em;
}
div::before {
content: '';
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
z-index: -1;
}
你的问题不是太清楚不过,所以我不知道这是你在找什么... 笔:http://codepen.io/marczking/pen/dqxwG
的影响wan't我想要的东西。我想要的是带有文字的盒子的背景是透明的,但是模糊不清,而且文字不是,当我放入时,它会模糊一切。想看代码? 我想要像这样的http://blurjs.com/像第一个框。 – user3614311