0

どうすれば似たようなことを達成できますか？

それが私が望む方法です

基本的に、問題は、キャプションの左上から隅にある小さなpngを外側に配置して、この効果を実現するにはどうすればよいかということです。

私は最新のカテゴリの投稿をループするためにこれを行っています：

  <div class="pages-thumbs">
  <?php $cat_id = 19; $cat_link = get_category_link( $cat_id ); ?>
  <a href="<?php echo the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
  <?php the_post_thumbnail('medium'); ?>
  <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
  <?php the_excerpt(); ?>
  </div>
  </div>

次に、これは、バッジを左上に揃えるためにh2（css）に使用するものです。

.home-thumbs h2 {
    background: url("images/top-left-label.png") no-repeat scroll left top #CBCBCB;
    font-size: 12px;
    margin-left: -8px;
    margin-top: -66px;
    max-width: 268px;
    padding-left: 12px;
    position: absolute;
}

これは私が持っているcssに基づいている方法です： これが今の様子です

bg pngをh2の外に移動できないように見えるので、別のアプローチを試す必要がありますか？

4

1 に答える 1

1

背景画像を隅だけに縮小します。次に、cssを次のように編集します。

.home-thumbs h2 {
    background: url("images/top-left-label.png") no-repeat scroll left top;
    font-size: 12px;
    margin-left: -8px;
    margin-top: -66px;
    max-width: 268px;
    position: absolute;
}

    .home-thumbs h2 span {

        width: inherit;
        background-color: #CBCBCB;
        padding-left: 12px;
        margin-top: HEIGHT OF H2 BG IMAGE;

    }
于 2011-12-15T14:08:05.507 に答える