Question

我将图片加载到我的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>

Answer 1

将此添加到imgDiv CSS代码：

position:relative;
z-index:0;

这使得图像就像一个图层，所以我们可以用同样的方式将文本放在它上面。现在为文本创建一个新的<div>或<p>，给它一个ID，然后将这个CSS代码写入其中：

position:relative;
z-index:1;

这会使文字位于照片的顶部。现在，如果您需要移动文本，请在相同的CSS中使用top: bottom: left: right:。

Answer 2

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

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

Answer 3

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类在透明度类之上。

Answer 4

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

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

如何在图像上添加文本

4 个答案: