大佬教程收集整理的这篇文章主要介绍了jquery – 不同的WordPress特色图像叠加效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想用彩色叠加显示帖子的标题.整个图像被覆盖/替换为彩色背景,其中标题包含在图像框内.
但重要的是,我希望每个帖子都有不同颜色的背景.
<article id="post-<?PHP the_ID(); ?>" <?PHP post_class('col-md-4 col-sm-4 pBox '); ?>> <?PHP $thumb = get_post_thumbnail_id(); $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big) $image = aq_resize( $img_url,750,560,true ); //resize & crop the image ?> <?PHP if($image) : ?> <a href="<?PHP the_permalink(); ?>"> <img class="img-responsive" src="<?PHP echo $image ?>"/></a> <?PHP endif; ?> <div class = "Box-ovrly"> <h2 class="Box-title"><a href="<?PHP the_permalink(); ?>" rel="bookmark"><?PHP the_title(); ?></a></h2> <div class="Box-Meta"><?PHP the_category(','); ?></div> </div> </article><!-- #post-## -->
一直在努力弄清楚如何叠加,然后转向更复杂的样式,如特定的颜色.我发现的例子使用链接标签’悬停’效果,但我不能操纵它为我工作
恩.
<a href="#" id="Box-ovrly"><img src="http://1.bp.blogspot.com/- todb82eBRF4/T2iE-lgY2LI/AAAAAAAABNo/HMhNfppjrHg/s1600/reddit%2Balien.JPG"> <p>REDDIT!</p></a>
悬停绝对定位在图像上方
// Generate Random Color
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
$('article').hover(
function () {
var color = getRandomColor();
$('.Box-ovrly',this).addClass('ovrly_start');
$('.Box-ovrly',this).css('background',color);
},function() {
$('.Box-ovrly',this).removeClass('ovrly_start');
}
);
以上是大佬教程为你收集整理的jquery – 不同的WordPress特色图像叠加效果全部内容，希望文章能够帮你解决jquery – 不同的WordPress特色图像叠加效果所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。