【问题标题】:How to BLUR THE BACKGROUND of a container? [duplicate]如何模糊容器的背景? [复制]
【发布时间】:2013-08-15 00:39:11
【问题描述】:

有没有办法模糊容器的背景,而不是里面的文字?

  1. 你首先有你的全屏图像[已经由我完成;-)实际上我使用的是纯 css 解决方案:

    background-size: cover;
    
  2. 比模糊 (1000px) 居中容器 (margin: 0 auto) 的背景,而不是容器中的内容。

  3. 同一个容器 (margin: 0 auto; width: 1000px;)(当然没有模糊),您可以在其中添加 html 内容(...文本)。

我希望任何人都可以帮助我。

【问题讨论】:

    标签: jquery css effects blur svg-filters


    【解决方案1】:

    减小实际图像的大小,并在您的 HTML 代码中为宽度和高度设置大尺寸。

    例如,让真实图像的宽度和高度各为 50 像素。 在 HTML 代码中设置宽度和高度,比如:150px。

    现在这将导致图像被拉伸,从而产生模糊效果。

    嗯,这是一个合乎逻辑的方法。

    如果您想使用 CSS (CSS3),请执行以下操作:

    filter: blur(5px) brightness(0.5);
    

    只需将值设置为您想要的任何值..

    参考:http://www.inserthtml.com/2012/06/css-filters/

    希望对您有所帮助...

    编辑 1:

    <div class="container">
        <div class="background"></div>
        <div class="text"></div>
    </div>
    

    将所有文本放入类为 "text" 的 div 中,并将类 "background" 的 div 留空..

    还应用以下样式:

    .background  {
        background: #CCC;
        filter: blur(5px) brightness(0.5);
        position: absolute;
        top: 0; left: 0;
        height: 100%; width:100%;
    }
    .text {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
    }
    

    【讨论】:

    • 有帮助吗?如果是,请接受答案。@MaximilianFuchs
    • 将其添加到您的 head 部分的 style 元素中。将其添加到您希望模糊其背景的容器中。像这​​样:container{filter:blur(5px) brightness(0.5);}
    • 好的,我会尽力寻找解决方案..
    • 你能告诉我你正在使用什么容器吗? div,span 还是什么?
    • 告诉我你正在使用什么容器..
    猜你喜欢
    • 2015-12-20
    • 2011-12-10
    • 2020-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-03
    • 2013-12-03
    相关资源
    最近更新 更多