Как я могу поместить div относительно изображения?

Question

У меня есть изображение, которое может изменить его положение в зависимости от определенных действий и нескольких div, которые я хочу с position на теге img.

Упрощенный код выглядит следующим образом:

<div> 
    <img src="someRandomImageUrl"> 
    <div>foobar</div> 
</div> 

Чтобы лучше понять, представьте, у меня есть изображение с небольшой площадью где-то вокруг центра, и я хочу, чтобы сообщение Foobar не быть размещен на площади изображения независимо от того, где Я помещаю изображение. Любые идеи?

Answer 1

Somthing как это? http://jsfiddle.net/q0so8esf/

.imdesc { 
    display: inline-block; 
    vertical-align: middle; 
    position: relative 
} 
.imdesc img { 
    vertical-align: middle; 
} 
.imdesc p { 
    text-align: center; 
    background: #fc0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    height: 100px; 
    margin: -50px; 
    border-radius: 50px; 
} 

Answer 2

Вы могли бы попробовать это, используя абсолютное позиционирование «foorbar»:

<div class="container"> 
    <img class="image" src="http://lorempixel.com/400/400" /> 
    <div class="text">foobar</div> 
</div> 

.container { 
    position: relative; 
    display: inline-block; 
} 
.image { } 
.text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    padding: 5px; 
    margin-top: -14px; 
    margin-left: -50px; 
    width: 100px; 
    background-color: white; 
    text-align: center; 
} 

JSFIDDLE DEMO

Вы можете регулировать ширину и magins по мере необходимости центра или расположить текст, где именно вам хочу это. display: inline-block для .container заставляет div.container не охватывать всю ширину страницы и позволяет нам горизонтально центрироваться с абсолютным позиционированием.

Answer 3

Код HTML. Дайте пример.

 <div class="background" 
    style="background-image: url('../../img/Australia-office_2.png'); height:40%"> 

      <div class="transbox"> 
       <h3>Some text</h3> 
       <p> 
        Some text 

       </p> 
      </div> 

     </div> 

CSS ::

div.background{ 
background-size: 100% 100%; 

} 
div.transbox{ 
color: #000000; 
text-shadow: none; 
} 

Answer 4

<div class="container-wrap"> 
    <img class="image" src="http://lorempixel.com/400/200/" /> 
    <div class="text-center">foobar</div> 
</div> 

<div class="container-wrap"> 
    <img class="image" src="http://lorempixel.com/400/200/" /> 
    <div class="text-top">foobar</div> 
</div> 

<div class="container-wrap"> 
    <img class="image" src="http://lorempixel.com/400/200/" /> 
    <div class="text-bottom">foobar</div> 
</div> 

.container-wrap { 
    position: relative; 
    display: inline-block; 
    margin:12px 0; 
} 

.text-center, .text-top, .text-bottom { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    padding: 5px; 
    margin-top: -14px; 
    margin-left: -50px; 
    width: 100px; 
    background-color: white; 
    text-align: center; 
} 
.text-top{margin-top:0; top:0;} 
.text-bottom{top:auto; bottom:0;}