Как вывести небольшой png за пределы моей стихии, чтобы добиться этого? - PullRequest
Новая
       14

Как вывести небольшой png за пределы моей стихии, чтобы добиться этого?

0 голосов
/ 15 декабря 2011

как мне добиться чего-то похожего?

that's the way I want it to look

По сути, вопрос заключается в следующем: как я могу расположить маленький 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: this is how it looks now

Должен ли я попробовать другой подход, поскольку мне не кажетсябыть в состоянии переместить BG PNG за пределы моего h2?

1 Ответ

1 голос
/ 15 декабря 2011

Уменьшить фоновое изображение до угла. Затем отредактируйте ваш 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;

    }
...