Как обернуть картинку (в настоящее время в фоновом режиме) с текстом

Question

Как обернуть картинку (в настоящее время в фоновом режиме) с текстом

0

У меня есть изображение, которое я установил в качестве фонового изображения, и я хочу запретить тот факт, что текст переопределяет изображение. В дополнение к этому, под рисунком, текст должен принимать всю ширину, и весь текст находится в том же абзаце!

Веб-сайт предназначен для мобильных устройств, поэтому я считаю, что гибкая коробка не подходит для всех устройств!

Размер изображения 64 * 64, и он не может быть другого размера!

http://jsfiddle.net/RF8b7/ или это мой текущий код

<div id="mydiv" class="myclass">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>

#mydiv{
background: transparent url(../contents/Picture.png) no-repeat 10px 0;
background-size: 64px 64px;}

Как я могу сделать?

заранее спасибо

clement 03 янв. 2014, в 16:37

Источник

0

Можно ли сделать так, чтобы невидимая копия изображения появлялась в том же месте, что и фоновая копия, и обернуть текст вокруг этого? Например, используйте visibility: hidden; на копии изображения ...
abiessu 03 янв. 2014, в 15:18
0

Не могли бы вы поместить изображение отдельно от текста (в другой контейнер)?
hkk 03 янв. 2014, в 15:20
0

@abiessu спасибо! Я попробую это сейчас, но это не очень чисто, это выглядит грязно для меня, не так ли?
clement 03 янв. 2014, в 15:23
0

@cloudcoder2000 cloudcoder2000: это возможно, да!
clement 03 янв. 2014, в 15:23
0

Вот моя версия Fiddle, надеюсь, она вам подходит! jsfiddle.net/RF8b7/5
Chris Frank 03 янв. 2014, в 15:23
0

@clement Пожалуйста, посмотрите на мой ответ. Вот демо: jsbin.com/aBoniKe/1/edit
hkk 03 янв. 2014, в 15:24
0

Если требования включают в себя то, что изображение должно быть размещено специально на заднем плане, тогда вы ничего не можете сделать, чтобы указать тексту, куда идти ...
abiessu 03 янв. 2014, в 15:25
0

@abiessu Вы можете поместить прозрачное изображение поверх фонового изображения, которое структурирует текст вокруг изображения в фоновом режиме, но для этого потребуется вставить изображение, что делает этот метод довольно глупым. Но опять же, это позволяет использовать фоновое изображение и текстовую структуру.
Chris Frank 03 янв. 2014, в 15:28
0

@ChrisFrank: я не говорил, что это хорошая идея, просто пытался придумать, как соответствовать кажущемуся требованию, чтобы видимое изображение было на заднем плане ...
abiessu 03 янв. 2014, в 15:30
0

@abiessu Да, я просто пытался найти решение для использования фонового изображения при сохранении текстовой структуры. Метод, который я сказал, на мой взгляд, глуп и требует больше работы, чем необходимо, но если, допустим, это домашнее задание, а инструктор требует, чтобы вы поместили изображение на заднем плане элемента div, структурируя вокруг него текст, мое решение будет соответствовать требованиям (я считаю).
Chris Frank 03 янв. 2014, в 15:33

Показать ещё 8 комментариев

Теги:

html

css

css3

background-image

2 ответа

1

Опция 1

Вы можете добавить другое изображение в документ с тегом img, visibility: hidden и float:left, и он будет работать одинаково. демонстрация

Вариант 2

Если вы поместите изображение отдельно от текста, вы можете использовать float: left; и текст пойдет вокруг него. демонстрация

HTML

<img src="http://i.telegraph.co.uk/multimedia/archive/01854/readers-moon-1_1854200j.jpg">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

CSS

img{
  float: left;
}

объяснение
Установка изображения в качестве фонового изображения для div содержащего текст, обычно является плохим идеей (если вы не хотите, чтобы она была фоном). Разделение изображения и div на отдельные контейнеры позволяет вам иметь больший контроль над позиционированием.

hkk 03 янв. 2014, в 13:19

0

Это снова дежавю!
abiessu 03 янв. 2014, в 15:28
0

@abiessu Мы пришли к одной и той же идее одновременно.
hkk 03 янв. 2014, в 15:30
0

Я думаю, что мы можем объяснить это "великим умом, думающим одинаково" ...
abiessu 03 янв. 2014, в 15:31
0

@abiessu, но они этого не делают
hkk 03 янв. 2014, в 15:32
0

Для варианта 1, почему вы используете float: left; ? Гарантируется ли фоновое изображение в этом месте?
abiessu 03 янв. 2014, в 15:45
0

@abiessu Вы правы, что использование float может быть небрежным, но в этом случае, я считаю, это работает. Я должен был бы знать, где на веб-странице, что это будет уверен, хотя.
hkk 03 янв. 2014, в 16:00

Показать ещё 4 комментария

Ещё вопросы

Можно ли сделать так, чтобы невидимая копия изображения появлялась в том же месте, что и фоновая копия, и обернуть текст вокруг этого? Например, используйте visibility: hidden; на копии изображения ...
Не могли бы вы поместить изображение отдельно от текста (в другой контейнер)?
@abiessu спасибо! Я попробую это сейчас, но это не очень чисто, это выглядит грязно для меня, не так ли?
@cloudcoder2000 cloudcoder2000: это возможно, да!
Вот моя версия Fiddle, надеюсь, она вам подходит! jsfiddle.net/RF8b7/5
@clement Пожалуйста, посмотрите на мой ответ. Вот демо: jsbin.com/aBoniKe/1/edit
Если требования включают в себя то, что изображение должно быть размещено специально на заднем плане, тогда вы ничего не можете сделать, чтобы указать тексту, куда идти ...
@abiessu Вы можете поместить прозрачное изображение поверх фонового изображения, которое структурирует текст вокруг изображения в фоновом режиме, но для этого потребуется вставить изображение, что делает этот метод довольно глупым. Но опять же, это позволяет использовать фоновое изображение и текстовую структуру.
@ChrisFrank: я не говорил, что это хорошая идея, просто пытался придумать, как соответствовать кажущемуся требованию, чтобы видимое изображение было на заднем плане ...
@abiessu Да, я просто пытался найти решение для использования фонового изображения при сохранении текстовой структуры. Метод, который я сказал, на мой взгляд, глуп и требует больше работы, чем необходимо, но если, допустим, это домашнее задание, а инструктор требует, чтобы вы поместили изображение на заднем плане элемента div, структурируя вокруг него текст, мое решение будет соответствовать требованиям (я считаю).
@abiessu Мы пришли к одной и той же идее одновременно.
Я думаю, что мы можем объяснить это "великим умом, думающим одинаково" ...
Для варианта 1, почему вы используете float: left; ? Гарантируется ли фоновое изображение в этом месте?
@abiessu Вы правы, что использование float может быть небрежным, но в этом случае, я считаю, это работает. Я должен был бы знать, где на веб-странице, что это будет уверен, хотя.

web-tiki · Accepted Answer · 2014-01-03T13-40-00.000Z

Это самый простой способ, о котором я могу думать:

FIDDLE

HTML:

<div id="mydiv" class="myclass">
    <img src="http://i.telegraph.co.uk/multimedia/archive/01854/readers-moon-1_1854200j.jpg"/>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>

CSS:

img{
    float:left;
}

лол, мы пришли к одной и той же идее одновременно.
наконец, я использую div и устанавливаю background-image для этого div, в дополнение к действительно оставленному значению с плавающей точкой! Спасибо всем!