Question

我正在重建我的wordpress投资组合网站。我的图像以灰度开始，顶部有透明的PNG，并且在没有PNG的情况下翻转成全彩色。

所以在弄清楚如何让透明的PNG坐在我的特色图像之上之后，我才意识到PNG让整个盒子都无法点击，然后在背面拍了拍。

它正在取消下面的链接（要发布的特色图片）

“pointer-events：none”也无济于事，它实际上会稍微影响翻转效果。

这是与图像相关的CSS ...

#png1 {width: 305px; 
height: 175px;
float: left; 
position: absolute;
    z-index: 1;
} 
#png1:hover {opacity: 0;
}

这就是我正在进行的PHP ...

<?php if ( have_posts() ) : ?>
<?php $i = 0; ?>
<?php while ( have_posts() ) : the_post(); $i++; ?>


<div class="post_home">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
    <a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
        <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail(array(305,175)); ?>
        <?php else : ?>
            <img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
        <?php endif; ?>
    </a>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
</div>


<?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
<?php endwhile; ?>

有什么建议吗？

编辑：

我根本不是网页设计师。我是一名印刷设计师。我在WP工作，因为我对CSS很满意。我有一种感觉答案就在代码中，盯着我，我只是不知道如何处理它。

任何帮助都会非常棒！）

Answer 1

正如我在评论中解释的那样，您可以稍微更改html的结构并将img标记放在锚点中，这可以通过简单地交换两行来实现：

<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">

变为

<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />

可点击的透明png？

编辑：

1 个答案: