Javascript 如何在图像上添加文本_Javascript_Php_Jquery_Html

Javascript 如何在图像上添加文本

javascript php jquery html

Javascript 如何在图像上添加文本,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我将图像加载到我的html页面。我使用jquery css属性将其不透明度设置为0.5。现在我想在这张图片的顶部写一个基于文本的句子。我的意思是说，我加载的图像，我希望它是在背景和文本出现在顶部这就像引用的图像 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

我将图像加载到我的html页面。我使用jquery css属性将其不透明度设置为0.5。现在我想在这张图片的顶部写一个基于文本的句子。我的意思是说，我加载的图像，我希望它是在背景和文本出现在顶部

这就像引用的图像

<!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>


无标题文件
div{
位置：绝对位置；
顶部：40px；
左：40px；
宽度：500px；
高度：500px；
}
#伊姆格迪夫{
宽度：500px；
高度：500px；
}
$（文档）.ready（函数（）{
$（“img”）.css（“不透明度”，0.5）；
});

只需将图像作为CSS中的div背景即可

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

将此添加到imgDiv CSS代码：

position:relative;
z-index:0;

这使得图像的行为像一个层，所以我们可以把文字放在它上面的相同方式。现在，为文本创建一个新的

或

，给它一个ID，并将此CSS代码写入其中：

position:relative;
z-index:1;

这将使文本位于照片顶部。现在，如果需要移动文本，请在同一CSS中使用

顶部：

底部：

左侧：

右侧：

。

您可以通过设置图像的CSS，将图像设置在所有其他DOM元素下面：

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

HTML

这应该足够了。它告诉img文本类位于透明度类的顶部。

对不透明度没有帮助。将此添加到div.-khtml不透明度：.50-moz不透明度：.50-ms过滤器：“α（不透明度=50）”；过滤器：α（不透明度=50）；过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=0.5）；不透明度：.50；我应该如何用php@prabhat-jain添加它这是css。你必须用HTMl添加这个。不管它是java、php、.net。

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

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

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