图像叠加层在图像前一秒加载答案

【问题标题】：Image overlay is loading a split second before image图像叠加层在图像前一秒加载
【发布时间】：2016-03-13 08:36:17
【问题描述】：

我正在尝试在使用Wordress get_posts() 从我的博客中提取的帖子列表上获得一个简单的图像叠加。到目前为止，我已经让叠加层正常工作，但是它会在加载图像前一秒钟加载，并且会产生难看的红色效果，每个图像在页面加载时都应该是这样。

我想知道是否有办法解决这个问题，有人对如何防止这种情况有任何建议吗？

这是我的代码：

<div class="post-container">
    <?php
    $args = array('posts_per_page' => 5);
    $myposts = get_posts($args);
    foreach ($myposts as $post) : setup_postdata($post);
        ?>
        <div class="post-box">
            <div class='post-img-overlay'>
                <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div>
            </div>
            <a class='post-title' href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <p><?php the_excerpt(); ?></p>
            <a  class='read-more' href="<?php the_permalink(); ?>">Read more</a>
        </div>
        <?php
    endforeach;
    wp_reset_postdata();
    ?>
</div>

只是一个简单的 Wordpress 循环，它会获取 5 个帖子和与每个帖子相关的信息，并将它们显示在主页上自己的 div 中。

图片叠加部分在这里：

<div class='post-img-overlay'>
    <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div>
</div>

它背后的CSS在这里：

.post-img{
    height:300px;
    width: 100%;
    background-size:cover;
    transition : opacity 500ms ease-out; 
    -webkit-transition : opacity 500ms ease-out; 
    -moz-transition : opacity 500ms ease-out;
    -o-transition : opacity 500ms ease-out;  
}
.post-img:hover {
    opacity: 0.5;
} 
.post-img-overlay {
     background-color: red;
     max-width: 100%; 
     max-height: 300px;
}

它在我的jsfiddle:http://jsfiddle.net/javacadabra/nphL3Lj5/5/ 上工作，但是当我使用上面的代码和一些 php 来实际动态拉取图像时，我会在图像前一秒加载覆盖层。

非常感谢任何帮助！

【问题讨论】：

标签： html css wordpress

【解决方案1】：

你可以这样翻转：

.post-img {
  height: 300px;
  width: 100%;
  background-size: cover;
  background-color: red;
  opacity: 0;
  transition: opacity 500ms ease-out;
  -webkit-transition: opacity 500ms ease-out;
  -moz-transition: opacity 500ms ease-out;
  -o-transition: opacity 500ms ease-out;
}

.post-img-overlay {
  background: url('http://img.thesun.co.uk/aidemitlum/archive/01440/Suzuki-motorbike_1440345a.jpg');
  max-width: 100%;
  max-height: 300px;
}

.post-img:hover {
  opacity: 0.5;
}

【讨论】：