上一篇: css – 在浏览器模式下删除“清除... 下一篇:CSS没有更新本地python httpserv...

css3 – 使div像透明模糊镜子一样透明

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css3 – 使div像透明模糊镜子一样透明，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想让div背景透明,所以我用这个css

-webkit-filter: blur(1pX);
-moz-filter: blur(1pX);
-ms-filter: blur(1pX);
-o-filter: blur(1pX);
filter: blur(1pX);

也看到这个小提琴：http://jsfiddle.net/LUy3W/

我只想让div模糊,但div中的所有内容也都模糊了.如何只使背景div模糊并使其内容像普通文本一样可见？

有什么想法吗？请帮忙.

解决方法

内容不能在模糊div内,因此请使用兄弟元素：

HTML

<div class="wrapper">
    <div class="blur"></div>
    <div class="content">my text</div>
</div>

CSS

.wrapper {
    height:400px;
    width:400px;
    position: relative;
}
.blur {
    width:100%;
    height:100%;
    position: absolute;
    BACkground-image:url('https://i.imgur.com/iAgdW.jpg');
    BACkground-size:cover;
    -webkit-filter: blur(4pX);
    -moz-filter: blur(4pX);
    -ms-filter: blur(4pX);
    -o-filter: blur(4pX);
    filter: blur(4pX);
}
.content{
    position: absolute;
    BACkground-color:red;
}