通过CSS模糊背景图片 [英] Blur a background image via css

问题描述

<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%;
}

我要使下面的页眉背景图像变得模糊，如下图所示.

I want to make the below Header background image blur as below of this page.

https://khaleejdev.com/kds/newtornetto/产品类别/多语言数字营销/

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

Please help me achieve it without affecting title. I tried all the previous answers of Stackoverflow but it didn't worked.

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

Actually i have a bunch of php code for wordpress product archive template, if html can adjusted to attain the feature i want without affecting current layout as shown in url https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/ .

请检查图像，我希望模糊仅影响图像，而不影响标题.

Please check the image , i want blur affect on image only, not on title.

那太好了.

这是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>

推荐答案

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

You can use the following CSS declaration to blur a background image:

filter: blur(value);

NB 如果您希望<div>包含其他内容，但希望仅 模糊背景图像，则将背景图像和模糊图像应用于::before伪元素.

N.B. If you want the <div> to contain other content but you wish to blur only the background image, then apply the background image and the blur to a ::before pseudo-element.

工作示例:

.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过滤器的更多信息:

• https://css-tricks.com/almanac/properties/f/过滤器/
• https://developer.mozilla.org/zh-CN /docs/Web/CSS/filter
• https://www.sitepoint.com/css-filter-effects-blur-grayscale-brightness-and-more-in-css/

• https://css-tricks.com/almanac/properties/f/filter/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• https://www.sitepoint.com/css-filter-effects-blur-grayscale-brightness-and-more-in-css/

这篇关于通过CSS模糊背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！