通过css模糊背景图像
通过css模糊背景图像
提问于 2018-06-11 01: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%;
}我想让下面的标题背景图像模糊，就像下面的页面一样。
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>回答 2
Stack Overflow用户
回答已采纳
发布于 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的内容：
Stack Overflow用户
发布于 2018-06-12 17:47:02
你有两个选择
- 您可以从背景父div中取出“标题”，并使用位置绝对属性将其在背景图像上对齐，然后对父div应用模糊代码。
.testingclass{滤镜:模糊(5px)；-webkit-滤镜:模糊(5px)；-moz-滤镜:模糊(5px)；-o-滤镜:模糊(5px)；-ms-滤镜:模糊(5px)；}
就像跟随
- 一样，使用PSD来使图像模糊，因为如果您将模糊或不透明度应用于父
，则无法控制内部元素的模糊效果。
您可以注意到，模糊效果适用于3图像网格部分，因为图像和文本是分开的，并且您使用position: absolute作为文本div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50786271
复制相关文章
相似问题