不同的 Wordpress 特色图像叠加效果

Posted 2023-05-09

【中文标题】不同的 Wordpress 特色图像叠加效果

【英文标题】：Different Wordpress Featured Image Overlay Effect

【发布时间】：2015-06-26 14:35:15

【问题描述】：

我有一个图像网格（由每个帖子的特色图像创建），并希望对每个图像应用悬停效果。

我希望它显示带有彩色叠加层的帖子标题。整个图像被彩色背景覆盖/替换，帖子标题包含在图像框中。

不过，最重要的是，我希望每个帖子都有不同颜色的背景。

当前代码（内容 page.php） -

  <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> 

将鼠标悬停在图像上

【问题讨论】：

如果没有看到您的 CSS，我们将无法知道您目前取得了什么成果，因为整个效果都是通过 CSS 处理的。您是否在生成不同的背景颜色时遇到问题，或者一般悬停效果有问题？您的问题不太清楚，前者将是 JS / PHP 的问题，因为单独的 CSS 不能是“动态的”。

已更新以显示我使用的更多相关代码

【参考方案1】：

也许这就是你想要的，注意应用的 CSS。同样：

// 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');
    
);

DEMO

【讨论】：

太棒了！有什么方法可以控制颜色。就像我可以选择每个帖子的颜色一样

最好的选择是在添加/编辑帖子部分创建一个自定义框并在那里应用选择的颜色，然后在获取特色图像时访问该颜色。

对于你提到的代码，我是把它添加到我的functions.php文件中还是我必须以不同的方式调用它？

按照这个例子，应用你的functions.php文件codex.wordpress.org/Function_Reference/add_meta_box中的代码