css - 如何从文本中删除 CSS 过滤器样式？

Question

我想去除文本中的模糊，但要让后面的图像保持模糊？我怎样才能做到这一点？

这是我正在使用的 CSS:

div.feature-img.page-banner {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

页面链接:http://newinternetdaily.com/2015/12/29/nasa-prepares-modern-telescope/

有什么办法可以去除文本中的 CSS 样式吗？

更新:HTML 代码

<div class="feature-img page-banner" style="background-image: url(http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1280%2C794);">
				<h1 class="headline img-headline" style="">NASA prepares Modern Telescope</h1>
				<img width="1280" height="794" src="http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1280%2C794" class="attachment-swell-featured-large size-swell-featured-large wp-post-image" alt="1280px-james_webb_telescope_model_at_south_by_southwest.jpg" srcset="http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=300%2C186 300w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=768%2C476 768w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?resize=1024%2C635 1024w, http://i1.wp.com/newinternetdaily.com/wp-content/uploads/2015/12/1280px-james_webb_telescope_model_at_south_by_southwest.jpg?w=1280 1280w" sizes="(max-width: 1280px) 100vw, 1280px">			</div>

Answer 1

尝试更改您的代码:

div.feature-img.page-banner {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

收件人:

div.feature-img.page-banner > img {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

这应该有效:使用“>”符号告诉您的代码只是为了影响图像。

示例:https://jsfiddle.net/soqre770/6/

div.banner > img{
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.banner p {
  position: absolute;
  left: 50px;
  top: 50px;
  color: white;
  font-size: 30px;
  font-family: verdana;
}

<div class="banner">

<img src="http://resurrection-mn.com/hp_wordpress/wp-content/uploads/2012/12/Wooden-Texture-Website-Banner.png">

<p>Test Text</p>

</div>