Question

我试图在使用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来实际动态地拉动图像时，我会在图像之前一瞬间加载叠加。

非常感谢任何帮助！

Answer 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;
}

图像叠加在图像之前加载一秒钟

1 个答案: