image - 如何将小 png 移到我的元素之外以实现此目的？

Question

我怎样才能实现类似的目标？

基本上，问题是：我怎样才能将标题左上角的小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 之外？

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

    }