Как добавить текст на изображение

Я загрузил изображение на мою страницу html. Я установил opacity в 0.5, используя свойство jquery css. Теперь Я хочу написать предложение на основе текста в верхней части этого изображения. Я хочу сказать, что загруженный образ я хочу, чтобы он был в фоновом режиме, и текст отображался сверху.Как добавить текст на изображение

Это как процитированное изображение.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Untitled Document</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <style type="text/css"> 
      div{ 
       position:absolute; 
       top:40px; 
       left:40px; 
       width:500px; 
       height:500px; 
      } 
      #imgDiv{ 
       width:500px; 
       height:500px; 
      } 
     </style> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("img").css("opacity", 0.5);     
      });    
     </script> 
    </head> 
    <body> 
     <div align="center"> 
      <img src="936371_607068789305456_425546376_n.jpg" id="imgDiv"/> 
     </div> 
    </body> 
</html>

источник

2013-11-19 Johnfranklien

Вы можете установить CSS изображения путем установить изображение ниже всех остальных элементов DOM:

 #imgDiv{ 
      position: absolute; 
      width:500px; 
      height:500px; 
      z-index: -1; 
     }

источник

2013-11-19 12:08:30

как добавить его с php @prabhat jain – Johnfranklien

Это css. Вы должны добавить это с помощью HTMl. Неважно, если это java, php, .net. –

-1

Просто поместите изображение в качестве фона div в CSS.

background-image: url(images/yourimage.jpg);

источник

2013-11-19 12:01:48

Не помогает с непрозрачностью. – MildlySerious

Добавьте это в свой div. -khtml-непрозрачность: 0,50; -moz-opacity: .50; -ms-filter: "alpha (opacity = 50)"; фильтр: альфа (непрозрачность = 50); filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 0.5); непрозрачность: .50; –

Добавить это imgDiv CSS код:

position:relative; 
z-index:0;

Это делает изображение акт как слой таким образом, мы можем поместить текст поверх него таким же образом. Теперь для текста сделать новый <div> или <p>, дать ему идентификатор и записать этот CSS код для него:

position:relative; 
z-index:1;

Это позволит сделать текст на верхней части фотографии. Теперь используйте top:bottom:left:right: в том же CSS, если вам нужно переместить текст вокруг.

источник

2013-11-19 12:05:45 Hazem

HTML

<div class="img-container"> 
    <img class="transparency" src="img.jpg" /> 
    <div class="img-text"> 
     Image is loaded. 
    </div> 
</div>

CSS:

.transparency { 
    opacity: 0.5; 
    z-index: 1; 
} 

.img-text { 
    z-index: 2; 
    position: absolute; 
}

Это должно быть достаточно. Он сообщает классу img-text над классом прозрачности.

источник

2013-11-19 12:28:07

Как добавить текст на изображение

ответ

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