Question

我有以下代码，它针对我的Wordpress帖子中的最后一个图像，并在其上放置#first-img，它只留下其他图像。

  <div id="s-img" class="row">      
    <?php
        preg_match_all('/(<img [^>]*>)/', get_the_content(), $images);
        for( $i=0; isset($images[1]) && $i < count($images[1]); $i++ ) {
        if ($i == end(array_keys($images[1]))) {
        echo sprintf('<div id="last-img">%s</div>', $images[1][$i]);
        continue;
        }
            echo $images[1][$i];
        }
    ?> 
</div>

CSS

#last-image { 
   position: absolute
   height: 50px; width: 50px;
   background-color: red;
}

问题是我希望它将#first-img置于图像的ON-TOP并使图像本身保持不变。现在它取代了图像。

渲染html - 图像和最后一张图像

<div id="s-img" class="row">        
<img class="alignnone size-large wp-image-396" src="http://localhost/wordpress/wp-content/uploads/2015/12/img3-1008x720.jpg" alt="img3" height="720" width="1008"> </img>
</div>

<div id="last-img">
<img class="alignnone size-large wp-image-397" src="http://localhost/wordpress/wp-content/uploads/2015/12/img4-1080x720.jpg" alt="img4" height="720" width="1080"></img>
</div>

Answer 1

问题是我希望它将#first-img放在图像上并让图像本身独立

你到底想要达到什么目的？我没有看到你输出任何额外的文字内容（如图像描述），所以我假设你只想在图像上叠加一个空元素，以应用某种CSS效果（背景色）？

如果是这样，你应该可以使用伪元素 - 而不是图像本身（因为具有空内容模型的元素不能具有那些元素），但是在你放置图像的div容器上：

#last-image { 
   position: relative;
   /* display:line-block; */ /* you might need to add that, */
                      /* if the image is not covering full width */
}
#last-image:after {
   content: "";
   position: absolute;
   top: 0; left:0; right:0; bottom:0; /* automatically stretch */
                                   /* to full parent width/height */
   background-color: red;
   z-index: 1; /* might not be necessary, depends on rest of CSS */
}

Answer 2

z-index将图像置于所有其他图像的“上方”，以及每个其他具有较低z-index的页面元素的“上方”。

#first-img { 
z-index: 999;
}

把绝对位置div放在最后一张图像上

2 个答案: