Question

我有兴趣拥有一个很大的“文字标题”（transparant-black）叠加层 wordpress中“slider-cycle”插件中的每个图像。

在functions.php中，

function slideshow_featured_posts() {
    wp_reset_query();
    $featured = 1; // Assuming that the name of the category ID number 1 is "Featured".
    $count = 3; // How many post to be shown as slides. Ideally, it should be more than 3 posts.
    add_filter('excerpt_length', 'hook_excerpt_featured_length');
?>

<div class="list">
    <?php while (have_posts()) : the_post(); ?>
    <div class="item">
        <a class="image" href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>">
        <?php the_post_thumbnail('slideshow'); ?>
        </a>
        <div class="meta">
            <h3><a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
            <?php the_excerpt(); ?>
        </div>
        <div style="clear: both"></div>
    </div>
    <?php endwhile; ?>
</div>

<?php
    wp_reset_query();
    remove_filter('excerpt_length','hook_excerpt_featured_length');
}

的index.php

<div id="slideshow-wrapper">
<?php slideshow_featured_posts(); ?>
</div>

CSS，

div#slideshow { position: relative; width: 780px; height: 300px; padding: 0 0 40px; margin: 0 auto; }
div#slideshow .list { position: absolute; width: 780px; height: 300px; z-index: 1; overflow: hidden; }

div#slideshow .button {
    width: 64px; height: 64px; position: absolute; top: 118px;
    outline: 0; cursor: hand; border: 0 none; color: #333; font-size: 45px; line-height: 45px; font-weight: bold;
}
div#slideshow #jqc-prev {
    border-bottom: 0 none;
    left: -74px;
}
div#slideshow #jqc-next {
    border-bottom: 0 none;
    right: -74px;
}

div#slideshow .item { width: 780px; margin: 0; }
div#slideshow .item .image { display: block; float: right; padding: 0; }
div#slideshow .item .meta  { width: 280px; padding: 0; float: left; }
div#slideshow h3 {
    font: bold 28px/32px Helvetica, Arial, sans-serif;
    display: block; padding: 0; margin: 0 0 20px 0;
}
div#slideshow h3 a:hover, div#slideshow h3 a:active {
    border: 0 none;
    text-decoration: underline;
}
div#slideshow p { display: block; padding: 0; margin: 0 0 20px 0; }

我应该把覆盖的透明黑色字幕div放在哪里？ z索引？

Answer 1

你有什么尝试？结果是什么？

如果是我，我会尝试使用Chrome的网站管理员工具或FireBug或者您可以随时更改CSS的内容

带有覆盖文本标题的jQuery循环插件？

1 个答案: