悬停时在图像上覆盖文本

Question

我试图将一些文本叠加到我页面上的图像上。我知道代码必须在 css 中，但如果不扭曲和丢弃所有内容，我就无法让它工作。这是图像在我的 html 代码中的位置

<div id="current">
        <h3><u>Current Products</u></h3>
        <img id="nintendo" src="http://www.albany.edu/~jc191638/image/n641.jpg" alt="n64"/> 
        <span class="text">text text text...</span>
        <p id="nintext">
</div>

这是它的css

#current
{
    float:center:
    height:984px;
    width:600px;
    background-color:    #475F77;
    padding-bottom:10px;
    text-align:center;
    border-style:solid;
    border-color:    #D74B4B;
}
#current:hover .text
{
    display: block
}
.text
{
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width:100%
    background: #999;
    background: rgba(0,0,0,0.3);
    text-align: center
}
#nintendo
{
    height:70%;
    width:70%;
    padding-left:10px;
}

Answer 1

没有float: center; 如果你想在图片上加上文字，你可以这样做：

HTML：

<div id="holder">
  <img src="some.png" />
  <span id="over_img">This text is over image</span>
</div>

CSS：

#holder {
  position: relative;
  overflow: hidden;
}

/* image is positioned to #holder top left */
#holder img {
  display: block;
}

#over_img {

  /* absolute positioning in holder */
  position: absolute;
  left: 0px;
  top: 0px;

  /* image position property is static so image z-index = 0 we 
     just set this top of image by giving greater number for z-index */
  z-index: 10; 

  /* position relative to #holder top of image */
  top: 10px; 
  left: 10px;
}

Answer 2

如果一个项目是 position:absolute，那么它相对于最近的父元素（具有 position: relative 或 position: absolute）或相对于 body 元素（如果没有父元素满足该条件）定位。

所以你必须添加“位置：相对；”到您包含的 div。

#current{
position: relative;
height:984px;
width:600px;
background-color:    #475F77;
padding-bottom:10px;
text-align:center;
border-style:solid;
border-color:    #D74B4B;
}

你可以在这里测试它：http://jsfiddle.net/PR3Vw/