在html中的图像上的字幕文本

Question

我想要一个文字从上到下滚动到我网页右上角的图片上。但我无法将文字放在图像上。提前致谢

<div id="display">
    <img height="210" width="160" src="note1.gif" />
    <marquee id="m1" onMouseOver="stopM()" onMouseOut="startM()" scrollamount="2" direction="up" loop="true" width="30%">
    <center>
    <p id="text">
    Opening Soon !!!
    </p>
    </center>
    </marquee>
    </div>

这是我的css代码

#display { 
        position:absolute; 
        visibility:show; 
        left: 73%; 
        top: 2%;        
        }
#text
{
     color:Black;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}

Answer 1

我会避免对HTML的有效性发表评论，并坚持在此处解决您的问题。

This fiddle should solve your problem

<强> CSS

#display 
{ 
     position:absolute; 
     visibility:show; 
     left: 73%; 
     top: 2%;
}
#text
{
    color:Black;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}
marquee {
    position: absolute;
    top: 0;
}

Answer 2

您需要将图像绝对定位在其他元素后面：

#display { position: relative; }
#display img { position: absolute; }

或将图片移动到背景中：

#display { 
   background-image: url(note1.gif);
   background-repeat: no-repeat;
}

尽管如此，请注意（正如其他人所指出的那样）<marquee>是一个非标准标记，并且<center>已经被弃用了很长时间。

Answer 3

如果您真的想这样做，请将CSS更改为

#display { 
        position: relative 
        visibility:show; 
        overflow:hidden;
       height: 210px;
       width: 160px;

        }

#display img { 
    position: absolute;
    z-index: 1;

}

#display marquee { 
    z-index: 2;
    position: absolute;

}



#text
{
     color:Black;
    font-size:12px;
    font-weight:bold;
    left:65%;
    top:2%;
}

See working demo here

Answer 4

这是工作代码..希望如此帮助你

<div id="marquee" style="margin-top: 5%;" >
       <marquee id="marquee2" scrollamount="5" loop="infinite" bgcolor="white"  onmouseover="this.stop()" onmouseout="this.start()">
       <div style="float: left; padding: 5px;">
        <a href="#"><img src="karachi.jpg"  style="height: 200px; width: 200px;" >
        </a>
        <div >
        <h2>MULTAN </h2>
        
        </div></div>
        <div style="float: left;">
        <a href="#"><img src="karachi.jpg"  style="height: 200px; width: 200px;" >
        </a>
        <div >
        <h2>LAHORE </h2>
        
        </div></div>
        
       </marquee>
    
    </div>  

                                                   

MULTAN

                                                     

LAHORE