Есть ли способ заставить текст HTML обтекать изображения - относительно прозрачности? - PullRequest
3 голосов
/ 11 июня 2011

На странице HTML можно обтекать текст изображениями с помощью свойства CSS «float».Но это будет учитывать только прямоугольник изображения, а не прозрачные области на изображении.Теперь у меня есть изображение с большими областями полной прозрачности, например, круглым логотипом, и я хочу, чтобы текст обтекал контур круга этого логотипа, а не ограничивающий прямоугольник.По крайней мере, с текстовой стороны изображения.

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

Ответы [ 2 ]

1 голос
/ 20 июля 2011

Я написал функцию PHP для этого сейчас.Он берет изображение PNG и генерирует элементы

, чтобы текст обтекал форму, отличную от прямоугольника изображения.Вы можете найти код здесь:

http://dev.unclassified.de/source/shaped-image-flow

0 голосов
/ 11 июня 2011

Я действительно сомневаюсь, что вы можете сделать это легко, не создавая большого беспорядка, тэгов, JavaScript или обоих. Один из способов, которым я могу думать, - это поместить изображение на более крупный zindex и расположить позади него div или div, и текст будет обтекать их. Было бы проще использовать меньший прямоугольник, исключающий прозрачные области. Но тогда почему бы просто не обрезать / обрезать изображение? Или вы можете попробовать плавающие строки высотой div, но я думаю, что это будет довольно уродливо и довольно быстро. Или вы можете попробовать поместить каждую строку текста в span / div и расположить их вручную или с помощью js, рассчитав приблизительные формы для тех, которые находятся на изображении. Еще одна идея, в которой я не уверен: возможно сделать это с помощью svg. Но быстрый поиск не дает многообещающего эфира.

В любом случае, нужно учитывать еще одну вещь: когда вы делаете что-то столь же экспериментальное и сложное, как бы вы ни делали это, каким бы способом вы это ни делали, скорее всего, будет очень трудно заставить его работать в большинстве браузеров.

...