可点击的透明png? [英] Clickable transparent png?

问题描述

我正在重建我的wordpress投资组合网站.我精选了一些图像，这些图像以灰度图开头，顶部是透明的PNG，然后变成没有PNG的全彩色.

I'm rebuilding my wordpress portfolio site. I have featured images that start as grayscale with a transparent PNG on top, and roll over into full colour with no PNG.

因此，在弄清楚如何让透明的PNG放在我的特色图片上之后，我拍了拍自己的背，然后才意识到PNG使得整个盒子都无法点击.

So after figuring out how to get the transparent PNG to sit on top of my featured image, I gave myself a pat on the back before realizing that the PNG makes the entire box unclickable.

它取消了下面的链接(要张贴的特色图片)

It's cancelling out the links underneath (featured images to post)

"pointer-events:none"也无济于事，它实际上使过渡效果有些问题.

"pointer-events:none" doesn't help either, it actually glitches the rollover effect a bit.

这是与图片有关的CSS ...

This is the CSS related to the image...

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

这是我要继续进行的php ...

And this is the php I've got going on...

<?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很满意.我觉得答案就在代码中，盯着我看，我只是不知道该怎么做.

I am by no means a web designer at all. I'm a print designer. I work in WP because I'm comfortable with CSS. I have a feeling the answer is right there in the code, staring at me, and I just have no idea what to do with it.

任何帮助都非常棒:)

推荐答案

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

As I explained in my comment, you can just change the structure of the html slightly and put the img tag inside the anchor, this can be achieved by simply swapping the two lines:

<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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！