В наборе HTML-страниц, содержащих важный текст, для которого требуется цвет фона. Это может произойти в любом месте на странице.
У меня также есть изображение, которое должно плавать прямо на каждой странице. Текст должен обернуться вокруг этого изображения.
Иногда текст, требующий цвет фона, необходимо обернуть вокруг плавающего изображения.
Проблема в том, что цвет фона текста распространяется под изображение. Как это:
Вот HTML и CSS:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Problem</title>
<style type="text/css">
.main{ width:500px; }
.floater { height:200px; width:200px; background-color:#C00; float:right; clear:left; margin:10px; padding:10px; overflow:hidden; }
.importantText { background-color:#333; color:#FFF; padding:5px; font-weight:bold; }
</style>
</head>
<body>
<div class="main">
<div class="floater">
[An image here]
</div>
<p class="plainText">Integer luctus, nunc vel condimentum ornare, mi eros vehicula nisl, non adipiscing enim risus sit amet urna. </p>
<p class="importantText">In hac habitasse platea dictumst. Fusce nec felis lorem. Fusce mollis ante elit, at tempor ipsum. Ut imperdiet libero sed sem rutrum rhoncus mattis erat aliquam. Aenean bibendum tincidunt erat sit amet varius. Vivamus sed arcu vitae magna aliquet porttitor quis sed augue. </p>
<p class="plainText">Fusce molestie dignissim libero vehicula egestas. Suspendisse porta, felis et auctor suscipit, quam mi facilisis odio, id tempus lorem leo ac quam. Proin rhoncus dignissim eros, et commodo ante rhoncus sit amet.</p>
</div>
</body>
</html>
Я пробовал много разных предложенных решений, но ни одного не нашел работы для этой конкретной проблемы. Есть ли способ заставить цвет фона соответствовать тексту (а , а не идти под изображением)? Можно ли это решить с помощью CSS или JavaScript (с доступом к jQuery)? Решение должно работать в IE7 +, FF4 +, Safari3 + и последней версии Chrome.