Как предотвратить размытие фонового изображения

Мне нужно знать, как заставить фоновое изображение не размываться, когда текст над ним в CSS, поскольку он портит внешний вид моего сайта, если он размыт.Как предотвратить размытие фонового изображения

Мой CSS является:

background: #ff0000 url(img/rain.jpg) top center repeat-y; 
background-size: 100%;

Но когда я загрузить его там, где есть текст, который проходит линия размыто, и я не хочу, чтобы это так, как мне это сделать?

Fiddle example

источник

2013-09-07 Josh Keighley

Wow. Я удивлен. В этом вопросе вам не было никакого контекста. Не зная контекста, это просто безответный мусор. Пожалуйста, добавьте код, скриншот, URL-адрес или, по крайней мере, что-то достаточно подробно описывающее проблему, что приведет к ней и где вы застряли ... Возможно, вы также захотите прочитать [FAQ], это может быть взаимовыгодным для нас все. – ppeterka

Мой код: background: # ff0000 url (img/rain.jpg) top center repeat-y; размер фона: 100%; Но когда я загружаю его там, где есть текст, эта строка размывается, и я не хочу, чтобы это так, как мне это сделать? –

введите код, о котором идет речь не в комментарии ... и если возможно, дайте нам живой пример в jsfiddle.net –

Я получил его, выполнив:

background: transparent;

к h2 и p элементов.

источник

2013-09-07 21:57:37

использование background-size: cover;background-position:50% 50%; поможет ..

* { 
font-family: Calibri, Comic Sans MS, Serif; 
background: #ff0000 url(http://www.coolguysite.co.uk/blog/templates/default/img/rain.jpg) top center repeat-y; 
background-size: cover; 
background-position:50% 50%; 
}

UPDATED FIDDLE

источник

2013-09-07 21:39:32

Спасибо за ваш комментарий, но см. Мой ответ. –

Попробуйте добавить:

образ-рендеринга: -webkit оптимизирует контрастность;

источник

2016-02-12 13:45:42

Это должен быть принятый ответ – Varin

Согласовано, это должен быть принятый ответ. – Adam

Они должны иметь встроенный в браузере эту функцию. Почему кто-то хочет, чтобы их изображения были размыты. Duh –

Попробуйте ввести это код: image-rendering: pixelated; Для меня это сработало отлично. вы также можете попробовать - image-rendering: -webkit-optimize-contrast;

источник

2016-10-26 08:07:06

Как предотвратить размытие фонового изображения

ответ

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