<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%;
}
我想让下面的标题背景图像模糊,就像下面的页面一样。
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>
发布于 2018-06-11 02:41:20
您可以使用以下CSS声明来模糊背景图像:
filter: blur(value);
N.B.如果您希望<div>
包含其他内容,但只希望模糊背景图像,则将背景图像和模糊应用于::before
伪元素。
工作示例:
.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 Filters的内容:
发布于 2018-06-12 17:47:02
你有两个选择
.testingclass{滤镜:模糊(5px);-webkit-滤镜:模糊(5px);-moz-滤镜:模糊(5px);-o-滤镜:模糊(5px);-ms-滤镜:模糊(5px);}
就像跟随
,则无法控制内部元素的模糊效果。
您可以注意到,模糊效果适用于3图像网格部分,因为图像和文本是分开的,并且您使用position: absolute作为文本div。
https://stackoverflow.com/questions/50786271
复制相似问题