Как разместить текст по изображению в css

104

Как разместить текст над изображением в css?Как разместить текст по изображению в css

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     <h2>Some text</h2> 
    </div> 
</div>

Я хочу сделать что-то как на картинке ниже, но у меня возникают трудности, вот мой текущий CSS

<style> 
.image { 
    position: relative; 
} 

h2 { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    margin: 0 auto; 
    width: 300px; 
    height: 50px; 
} 
</style>

enter image description here

Когда я использую фоновое изображение, я не получаю выход из HTML2PDF:

<style> 
#image_container{ 
    width: 1000px; 
    height: 700px; 
    background-image:url('switch.png'); 
} 
</style> 
<a href="prints.php">Print</a> 
<?php ob_start(); ?> 
<div id="image_container"></div> 
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush(); 
?>

Вот prints.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?> 
<?php 
$html2pdf = new HTML2PDF('L', 'A4', 'en'); 
$html2pdf->writeHTML($_SESSION['sess']); 
$html2pdf->Output('random.pdf'); 
?>

источник

2012-01-03 Wern Ancheta

158

Как о чем-то вроде этого: http://jsfiddle.net/EgLKV/3/

его сделали с помощью position:absolute и z-index разместить текст над изображением.

#container { 
 
    height: 400px; 
 
    width: 400px; 
 
    position: relative; 
 
} 
 
#image { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 350px; 
 
}

<div id="container"> 
 
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" /> 
 
    <p id="text"> 
 
    Hello World! 
 
    </p> 
 
</div>

источник

2012-01-03 07:48:43 xbonez

+12

Вы можете избежать z-index – FooBar

Это сообщение больше не работает? – danielad

@ danielad: Он отлично работал, пока вы не отредактировали ответ. Я отбросил ваши изменения. – xbonez

Почему бы не установить sample.png в качестве фонового изображения text или h2 класса CSS? Это даст эффект, поскольку вы написали изображение.

источник

2012-01-03 07:03:00

Что делать, если изображение должно быть смысловая часть документа? – animuson

@animuson: Я не думаю, что это так. : \ –

Я использую html2pdf для создания pdf-файла, и если я использую фоновое изображение, я ничего не получаю. –

как Гарри Радость указывает, задайте изображение как фон div, а затем, если у вас есть только одна строка текста, вы можете установить высоту строки текста так же, как высота div, и это поместит ваш текст в центре div.

Если у вас есть несколько строк, вы хотите настроить отображение табличной ячейки и выравнивание по вертикали до середины.

источник

2012-01-03 07:05:09

Я использую html2pdf для создания pdf-файла из этих. Я не вижу изображения, если использую фоновое изображение. См. Мое редактирование. –

Извините, я понятия не имею, что такое html2pdf. –

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

Стили CSS:

/*Centering element in a base container*/ 

.contianer-relative{ 
    position: relative; 
} 

.content-center-text-absolute{ 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    height: 0%; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 51; 
}

HTML код:

<!-- Have used ionic classes --> 
<div class="row"> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed --> 
    </div> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed --> 
    </div>  
</div>

Для ИОННЫЙ сетки макета, равномерно расположенных элементов сетки и классов, используемых в выше HTML, пожалуйста, обратитесь - Grid: Evenly Spaced Columns. Надеюсь, это поможет вам ... :)

источник

2016-03-01 12:09:05 Kailas

Это еще один способ работы с ответственными размерами. Он сохранит ваш текст в центре и сохранит свою позицию в пределах его родителя. Если вы не хотите, чтобы это было сосредоточено, то это еще проще, просто работайте с параметрами absolute. Помните, что основной контейнер использует display: inline-block. Есть много других способов сделать это, в зависимости от того, над чем вы работаете.

Основе с Centering the Unknown

Working codepen example here

HTML

<div class="containerBox"> 
    <div class="text-box"> 
     <h4>Your Text is responsive and centered</h4> 
    </div> 
    <img class="img-responsive" src="http://placehold.it/900x100"/> 
</div>

CSS

.containerBox { 
    position: relative; 
    display: inline-block; 
} 
.text-box { 
    position: absolute;  
    height: 100%; 
    text-align: center;  
    width: 100%; 
} 
.text-box:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
h4 { 
    display: inline-block; 
    font-size: 20px; /*or whatever you want*/ 
    color: #FFF; 
} 
img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

источник

2016-07-07 19:57:01

Это решение отлично подходит для тех случаев, когда вы не можете указать заданную высоту или ширину. – Yazmin

в 2017 г. это более отзывчиво и работает для меня. Это для того, чтобы нанести текст внутри vs поверх, как значок. вместо числа 8 у меня была переменная, чтобы извлекать данные из базы данных.

этот код начался с Kailas «s ответить на выше

https://jsfiddle.net/jim54729/memmu2wb/3/

Мой HTML

<div class="containerBox"> 
    <img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png"> 
    <div class='text-box'> 
    <p class='dataNumber'> 8 </p> 
    </div> 
</div>

и мой CSS:

.containerBox { 
    position: relative; 
    display: inline-block; 
} 

.text-box { 
    position: absolute; 
    height: 30%; 
    text-align: center; 
    width: 100%; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    font-size: 30px; 
} 

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: 120px; 
    margin: auto; 
    padding: auto; 
} 

.dataNumber { 
    margin-top: auto; 
}

источник

2017-03-02 17:57:09

Небольшой и короткий способ сделать то же самое

HTML

<div class="image"> 
    <p> 
     <h3>Heading 3</h3> 
     <h5>Heading 5</h5> 
    </p> 
</div>

CSS

.image { 
     position: relative; 
     margin-bottom: 20px; 
     width: 100%; 
     height: 300px; 
     color: white; 
     background: url('../../Images/myImg.jpg') no-repeat; 
     background-size: 250px 250px; 
    }

источник

2017-04-29 05:49:58

Как разместить текст по изображению в css

ответ

Смежные вопросы