Сделать текст, чтобы избежать div, вопрос макета

Question

Здесь - это картинка

Так что это изображение веб-сайта, который я размещаю для некоммерческой организации.

Изображение в div, которое имеетследующие атрибуты:

position:absolute; right:50px; top:50px;

Я хочу сделать текст более заметным, поскольку при разных разрешениях изображение будет в разных местах, поэтому я могу либо:

- сделать текст видимым на картинке

- или сделать так, чтобы текст избегал div (если это возможно)

Итак, у вас есть какие-нибудь идеи?Спасибо:)

Answer 1

Во-первых, невозможно обтекать текст вокруг абсолютно позиционированного div, так как он выводится из нормального потока;см. http://www.w3.org/TR/CSS2/visuren.html#choose-position

Что вы можете сделать, это использовать следующие атрибуты:

float: right; margin-right: 50px;

И затем поместить его в нужное место, чтобы получить i, что должно достичь того, что вы пытаетесь сделать,Если у вас есть его в качестве первого элемента, вы также можете добавить,

margin-top: 50px;

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

Answer 2

Я бы добавил фон RGBA ниже текста, и эта область занимала бы ок.половина изображения (нижняя или верхняя половина).

Текст поверх слайд-шоу в http://www.tenwhil.com/ или http://airliquide.com/ в качестве примеров.В последнем случае проверьте условные комментарии для IE6 и IE7, где фильтр используется для тех браузеров, которые не понимают нотацию rgba().-ms-filter находится в основной таблице стилей, я не хотел создавать таблицу стилей для IE8 только для одной инструкции ...

background-color: rgb(64,64,64);  /* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
background-color: rgba(64,64,64, 0.7); /* recent browsers */

via conditional comment for IE<8
background-color: rgb(64,64,64);
filter: alpha(opacity:70);

edit:
Худший контраст "маленького" текста вышефон должен быть 4.5:1 при измерении с помощью такого инструмента, как Анализатор контрастности цвета и 3:1 для заголовков (жирный шрифт 14px или нормальный 18px, прим.)

Answer 3

Проблема читаемости связана не только с фоновым изображением.Старайтесь избегать использования синего текста на синем фоне, что значительно улучшит читабельность.

Кроме того, я бы вообще не использовал фотографии в качестве фона для текста (вместо этого просто сделайте фотографию частью содержимого).Но если вам не хочется менять эту часть страницы, я бы просто использовал более темный фон и использовал белый текст.

Answer 4

используйте этот стиль также .. это сделает ваш рисунок немного прозрачным .. при какой непрозрачности вы хотите .. и сделать текст более четким .. (если текст не является частью рисунка)

 opacity:0.4;filter:alpha(opacity=40)