Как удалить стиль фильтра CSS из текста?

Я хочу удалить размытие из текста, но сохранить изображение в обратном размытом? Как я могу это достичь?Как удалить стиль фильтра CSS из текста?

enter image description here

Это CSS я использую:

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

ссылку Страница: http://newinternetdaily.com/2015/12/29/nasa-prepares-modern-telescope/

Есть ли способ, чтобы удалить стиль CSS из текста?

UPDATE: 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);"> 
 
\t \t \t \t <h1 class="headline img-headline" style="">NASA prepares Modern Telescope</h1> 
 
\t \t \t \t <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"> \t \t \t </div>

источник

2015-12-29 Anon User

Вы должны добавить HTML-код в CSS фильтров вопрос –

влияют на все дочерние элементы родителя, когда фильтр был применен и не может быть переопределен .. .it как «непрозрачность» в этом отношении. Отфильтрованное изображение будет иметь совершенно другой, не-дочерний элемент. –

Хотелось бы первыми указать на иронию, что текст, описывающий новый телескоп НАСА, не в фокусе! –

Возможно добавить IMG селектору элемента

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

источник

2015-12-29 17:48:57

Нет, это тоже не работает, я думаю, что текст является дочерним по отношению к родительскому изображению? –

Пожалуйста, попробуйте это:

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

Надеюсь, это может вам помочь.

источник

2015-12-29 17:56:08

это не сработало –

@AnkitBagwan Я думаю, что это работает, если вы удалите 'filter: blur (4px);' from 'div.feature-img.page-banner'. –

все еще не работает? –

Попробуйте снимать фоновое изображение на обертку DIV и использовать абсолютное позиционирование:

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

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

источник

2015-12-29 18:13:33 cocoa

Я боюсь Не повезло :( –

действительно ли это отображается в отрывке? – cocoa

<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);"> 
 
\t \t \t \t <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"> \t \t \t </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>

источник

2015-12-29 18:20:25

Я думаю, что это работает. Не вижу никакого размытия, хотя.Дайте ему вихрь –

, пожалуйста, расскажите, какие изменения вы внесли? –

Я добавил контейнер div (class = "banner-container") и переместил тег h1 за пределами div. Итак, теперь они представляют собой два отдельных div внутри контейнера div. Контейнер-контейнер будет растягиваться, чтобы соответствовать размеру изображения div внутри, и h1 теперь имеет положение абсолютное, чтобы оно отображалось поверх изображения. Поскольку размытие применяется к div изображения, оно больше не влияет на текст. –

Попробуйте изменить код с:

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

To:

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>

источник

2015-12-30 10:34:32

:(Нет, не так ли? –

Как удалить стиль фильтра CSS из текста?

ответ

Смежные вопросы