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 for it

#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

如果一个项目是position：absolute，那么它相对于最近的父项（具有位置：relative或position：absolute）或相对于body元素的任何位置（如果没有父项符合该条件）。

所以你必须添加“position：relative;”到你的包含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/

Answer 2

没有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;
}

悬停时覆盖图像上的文本

2 个答案: