通过css模糊背景图像答案

【问题标题】：Blur a background image via css通过css模糊背景图像
【发布时间】：2018-06-10 17:26:31
【问题描述】：

<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">
    <div class="wpd-page-title__inner">
        <div class="container">
            <div class="wpd-page-title__content">
                <div class="page_title">
                    <h1>Multilingual Digital Marketing</h1>
                                        </div>
                                                    </div>

        </div>
    </div>    
</div>

这些的 CSS 是

body.term-107 .wpd-page-title {
background: url(https://khaleejdev.com/kds/newtornetto/wp- 
content/uploads/2018/05/107.jpg)no-repeat;
background-size: 100%;
}

我想让下面的 Header 背景图像模糊，就像这个页面的下面一样。

https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/

请帮助我在不影响标题的情况下实现它。我尝试了 Stackoverflow 以前的所有答案，但没有成功。

实际上我有一堆用于 wordpress 产品存档模板的 php 代码，如果 html 可以调整以实现我想要的功能而不影响当前布局，如 url https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/ 所示。

请检查图片，我只想模糊影响图片，而不是标题。

那就太好了。

这是php代码

<div class=" testingclass wpd-page-title<?php echo !empty($page_title_classes) ? esc_attr($page_title_classes) : ''; ?>"<?php echo !empty($page_title_styles) ? ' style="'.esc_attr($page_title_styles).'"' : '' ?>>
    <div class='wpd-page-title__inner'>
        <div class='container'>
            <div class='wpd-page-title__content'>
                <div class='page_title content'>
                    <h1><?php echo esc_html($wpd_page_title); ?></h1>
                    <?php if(!empty($page_sub_title) && $page_title_horiz_align != 'center'): ?>
                        <div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
                    <?php endif; ?>
                </div>
                <?php if (!empty($page_sub_title) && $page_title_horiz_align == 'center'): ?>
                    <div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
                <?php endif; ?>
                <?php if ($page_title_breadcrumbs_conditional == 'yes'): ?>
                    <div class='wpd_breadcrumb'><?php 
                        /** Breadcrumb Template */
                        get_template_part( 'template-parts/header/partials/breadcrumb' ); 
                    ?></div>
                <?php endif; ?>
            </div>

        </div>
    </div>    
</div>

【问题讨论】：

我尝试了 Stackoverflow 以前的所有答案，但没有奏效。请不要将此问题标记为重复。
为我工作 - codepen.io/aniketpant/pen/DsEve
@Mr.Alien 你真的试过我的代码吗？我问的是我的代码，而不是你的代码。请尝试用我的代码来实现它。
不尝试但重新打开，因为您强调旧答案对您不起作用。
@Nimesh 因为您的文本位于一个 div 中，该 div 嵌套在具有背景图像的 div 中，如果您对一个 div 应用模糊，则嵌套在其中的所有其他 div 也会受到影响。

标签： php html css wordpress hook-woocommerce

【解决方案1】：

您可以使用以下 CSS 声明来模糊背景图像：

filter: blur(value);

注意如果您希望 <div> 包含其他内容但您希望仅模糊背景图像，则将背景图像和模糊应用到 @ 987654326@伪元素。

工作示例：

.wpd-page-title {
position: relative;
width: 100%;
height: 180px;
}

.wpd-page-title::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://picsum.photos/300/300) no-repeat;
}


.blur-3px::before {
filter: blur(3px);
}

.blur-6px::before {
filter: blur(6px);
}

.blur-9px::before {
filter: blur(9px);
}

<div class="wpd-page-title"></div>
<div class="wpd-page-title blur-3px"></div>
<div class="wpd-page-title blur-6px"></div>
<div class="wpd-page-title blur-9px"></div>

阅读有关 CSS 过滤器的更多信息：

【讨论】：

对他的问题的回答不够充分。这不是他的完整代码。他在里面嵌套了带有文本的 div，即使这样，文本仍然会受到模糊的影响。
很公平。我已经编辑了上面的答案，以演示如何将背景图像和模糊滤镜应用于::before 伪元素，而其余内容保持不变。
我必须用当前的代码来做，这可能吗？
@Rounin 和 SirExotic 我已经通过更多帮助更新了我的问题。这可以实现吗？

【解决方案2】：

你有两个选择，

您可以从背景父div中取出“标题”并使用位置绝对属性将其与背景图像对齐并为父div应用模糊代码

 .testingclass{
 filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

喜欢关注

<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">

  </div>
 <div class="wpd-page-title__inner">
    <div class="container">
        <div class="wpd-page-title__content">
            <div class="page_title">
                <h1>Multilingual Digital Marketing</h1>
                                    </div>
                                                </div>

    </div>
</div>

使用 PSD 使图像模糊，因为如果对父级应用模糊或不透明度，则无法控制内部元素的模糊效果

您可以注意到，模糊效果适用于 3 图像网格部分，因为图像和文本是分开的，并且您使用 position: absolute 作为文本 div。

【讨论】：