div 外的 img

发布于 2024-12-21 02:36:58 字数 1197 浏览 0 评论 0原文

我有以下内容：

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

我只想得到那个在我的 div 之外有切角的小 png，但无法做到这一点。我该怎么做，我在这里缺少什么？！

div 是图像标题的“标签”。我在推荐中的工具提示上遇到了同样的问题，我无法使用带有箭头和正常边框的底部部分，因为我的 img 不会显示在包含的 div 之外。

谢谢。

PS HTML 和PHP ..

<div id="home" class="home-thumbs">
  <?php query_posts('cat=19&posts_per_page=1'); 
  if(have_posts()) : while(have_posts()) : the_post(); ?>
  <p class="cat-title"><?php echo single_cat_title();?></p> <?php the_post_thumbnail('medium'); ?>
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      <h2><?php the_title(); ?></h2>
        <?php $cat_id = 19; $cat_link = get_category_link( $cat_id ); ?>
        <?php the_excerpt(); ?>
        <a href="<?php echo $cat_link; ?>">More in this section</a>
    </div>
  <?php endwhile; endif; wp_reset_query(); ?>  
</div>

原文

I have the following:

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

I only want to get that small png with a cut corner outside my div, but can't manage to do it. How should I do it, what am I missing here?!

The div is meant to be a "label" for a title over an image. I am having the same problem with a tooltip from a testimonial, I can't use the bottom part with the arrows and normal borders as, again, my img won't show outside the containing div.

Thanks.

P.S. HTML & PHP ..

<div id="home" class="home-thumbs">
  <?php query_posts('cat=19&posts_per_page=1'); 
  if(have_posts()) : while(have_posts()) : the_post(); ?>
  <p class="cat-title"><?php echo single_cat_title();?></p> <?php the_post_thumbnail('medium'); ?>
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      <h2><?php the_title(); ?></h2>
        <?php $cat_id = 19; $cat_link = get_category_link( $cat_id ); ?>
        <?php the_excerpt(); ?>
        <a href="<?php echo $cat_link; ?>">More in this section</a>
    </div>
  <?php endwhile; endif; wp_reset_query(); ?>  
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遮了一弯 2024-12-28 02:36:58

您已将其绝对定位，因此请按照预期使用 top 和 left

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

You have it positioned absolutely, so use top and left as you're supposed to

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

回复收藏 0 原文