Question

您好我有一个从数据库中检索图像的页面。

我需要将图像ID放在图像的前方，而不是图像。

我试过alt，但我认为这不会起作用。

怎么做？

这是我的图片代码：

<a href="property.php?ImageID=<?php echo $row['ImageID'] ?>" >
          <img src="../../.../<?php echo $row['ImagePath'] ?>" width="380" height="270" alt="<?php echo $row['ImageName'] ?>" class="imagedropshadow" ></a>

Answer 1

<强> CSS

.property {
    width: 380px;
    height: 270px;
    box-shadow: inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    margin: 5% auto 0 auto; 
    background-size: cover;
    border-radius: 5px;
    overflow: hidden;
}

.property-id {
    background: rgba(0,0,0,.75);
    text-align: center;
    padding: 70px 0 70px 0;
    opacity: 0;
    -webkit-transition: opacity .25s ease;
       -moz-transition: opacity .25s ease;
}

.property:hover .property-id {
    opacity: 1;
}

.property-id-text {
    font-family:Helvetica;
    font-weight:900;
    color:rgba(255,255,255,.85);
    font-size:96px;
}

<强> HTML

<div class="property" style="background-image: url(../../.../<?php echo $row['ImagePath'] ?>)">
    <div class="property-id">
        <span class="property-id-text"><?php echo $row['ImageID'] ?></span>
    </div>
</div>

演示：http://jsfiddle.net/asvuge2k

Answer 2

<a href="property.php?ImageID=<?php echo $row['ImageID'] ?>" >
      <img src="../../.../<?php echo $row['ImagePath'] ?>" width="380" height="270" title="<?php echo $row['ImageName'] ?>" class="imagedropshadow" ></a>

Answer 3

<a href="property.php?ImageID=<?=$row['ImageID'] ?>">
        <span style="position: absolute; background-color: #ffffff"><?=$row['ImageID'] ?></span>
        <img src="../../.../<?php echo $row['ImagePath'] ?>" width="380" height="270" alt="<?=$row['ImageID'] ?>" class="imagedropshadow">
</a>

如何在每张图片上放置ID

3 个答案: