CSS: рамка + текст поверх изображения

Question

Во-первых, я хотел бы показать вам изображение (выполненное краской).

Хорошо, «ток» - это то, что я имею сейчас. Я хочу поместить прямоугольник над изображением справа с черным фоном, а затем поместить текст внутри этого поля.

Я попробовал себя, используя z-index и так, но безуспешно. Вот что я попробовал:

<div> <!-- start div for image -->
  <img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
  <div style="margin: auto;">
    text text text
  </div>
</div>

но это не принесло пользы. Как я могу это сделать?

Answer 1

Как-то так?

http://jsfiddle.net/QGMPB/1/

HTML:

<div id="wrap">
    <img src="http://jsfiddle.net/img/logo.png" />
    <div id="text">text</div>
</div>

CSS

#wrap {
    position:relative; /* make this relative to have the inner div absolute without     breaking out */
    width: 200px;  /* fix the width or else it'll be the entire page's width */
    background: silver; 
    border: 1px solid grey
}

#text {
    position: absolute; 
    width: 40px; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: black; 
    color:white
}

Answer 2

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

Укажите, нужен ли вам тег <img>.

HTML:

<div id="golf_course">
    <div class="text_wrap_right">
        text text text text
    </div>
</div>

CSS:

#golf_course
{
    background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
    background-position: 0 -200px;
    width: 900px;
    height: 259px;
    border: 5px solid #000;
}

.text_wrap_right
{
    width: 300px;
    height: 100%;
    float: right;
    background: #000;
    color: #fff;
    border-left: 2px solid #000;
}

И пример для васздесь: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/

Answer 3

Я предпочитаю простое и более семантическое решение HTML5

HTML:

<figure>
  <img src="..." />
  <figcaption>text text text ... </figcaption>
</figure>

CSS:

figure {
  position : relative;
  z-index  : 1;
  width    : 860px;
  height   : 240px;
}

figcaption {
  position : absolute;
  z-index  : 1;
  top      : 0;
  right    : 0;
  width    : 200px;
  height   : 240px;
  background : #000;
}

Answer 4

Для написания текста поверх изображения вы помещаете изображение в фоновый стиль, а другой текст вроде этого -

<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>

Answer 5

z-index работает только для позиционированных элементов (position: (absolute|fixed|relative)).Таким образом, вы должны расположить свои элементы.Например

<div style="position: relative;">
  <div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;"> 
<img src="http://w3schools.com/images/w3cert.gif" />
  </div>
  <div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
  </div>
</div> 

должно работать.

Answer 6

Следующий пример показывает, как это можно сделать, пожалуйста, дайте мне знать, если это не то, что вы имеете в виду: Пример .

Answer 7

Вам нужно поместить этот текстовый div в div, содержащий изображение .., затем установить верхнюю и правую части в 0px и установить абсолютную позицию. Возьмите несколько подсказок отсюда: http://jsfiddle.net/U25XQ/1/

Answer 8

Используйте position:absolute, чтобы перекрыть 2 деления.Вы должны поиграть со свойствами left и top, чтобы настроить его положение.

 <div style="position:absolute"> <!-- start div for image -->
    <img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
    </div> <!-- end div -->
    <div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
    <div style="margin: auto;">text text text</div>
    </div>