如何在我的元素外部移動小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; 

    }