如何从文本中删除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代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

这应该有效：使用＆＃34;＆gt;＆＃34;象征你告诉你的代码只是为了影响图像。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

可能将img添加到元素选择器

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

Answer 3

请试试这个：

/* Add this class with ::before selector. */
.feature-img.page-banner::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: 0;
    filter: blur(4px);
}
.page-banner, .feature-img.page-banner {
    width: 100%;
    min-height: 240px;
    max-height: 640px;
    position: relative;
    margin: 0px;
    background-position: center center;
    background-size: cover;

    /* And add this 2 new lines... */
    overflow: hidden;
    text-align: left;
}

希望这可以帮到你。

Answer 4

尝试取下包装div上的背景图像并使用绝对定位：

＆＃13;

＆＃13;

 div.feature-img.page-banner img {
   -webkit-filter: blur(4px);
   filter: blur(4px);
   position: absolute;
 }
 .img-headline {
   position: absolute;
   color: white;
   z-index: 1;
 }

＆＃13;

<div class="feature-img page-banner">
  <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">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

＆＃13;

＆＃13;

<div class="banner-container">
<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);">
				<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>
    </div>
<h1 class="headline img-headline" style="">NASA prepares Modern Telescope</h1>
</div>

<style>
.banner-container {
display: block;
position: relative;
}
div.feature-img.page-banner {
display: block;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.img-headline {
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
text-align: center;
line-height: 20;
color: white;
}
</style>

＆＃13;

＆＃13;

＆＃13;