如何将背景颜色放在内容容器的底部？

Question

我想应用背景颜色，高度为 200 像素。然后我想将此背景颜色放置在相关内容的底部。我已经设法在我正在处理的其他网页上实现了这一点，但在这个页面上遇到了困难。无论我做什么，背景颜色都会停留在内容容器的顶部。

HTML/PHP：

 <div class="row" id="latest-products">
    <h2 id="latest-products-title-row"><i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i><span id="latest-products-title">Latest Products</span><i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i></h2>
        <ul class="row-fluid">
            <?php
                $args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' );
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post(); global $product; 
            ?>
                        <li class="latest-products-content">    
                            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php 
                                    if (has_post_thumbnail( $loop->post->ID )) 
                                    echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); 
                                    else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; 
                                ?>
                            </a>
                                <h3><?php the_title(); ?></h3>
                                <p><?php the_excerpt(); ?></p>
                                <div class="price"><i class="fa fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i><span id="product-price"><?php echo $product->get_price_html(); ?></span><i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i></div>
                                <div class="view/buy"><a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">View/Buy</a></div>
                        </li>
                <?php endwhile; ?>
                <?php wp_reset_query(); ?>
        </ul>
</div>

CSS

#latest-products{
    background-color: blue;
    height: 200px;
    background-position: bottom;
}

任何关于我可能在哪里出错的建议，我们将不胜感激。

Answer 1

要使用背景位置属性，您需要设置背景图像，因此要使用颜色填充底部 200px 区域，您可以设置以下内容：

background-image: linear-gradient(blue, blue 100%);
background-size: 100% 200px;
background-repeat: no-repeat;
background-position: center bottom;

Answer 2

如果您使用浏览器检查脚本，您会看到#latest-products 完全被蓝色填充。这是因为background-position 仅适用于background-image。它不会为您提供任何颜色的偏移。

background-position 属性设置背景图像的起始位置。

来源：https://www.w3schools.com/cssref/pr_background-position.asp

您可以在#latest-products 的底部创建另一个div，即positioned absolute。这可能会解决您的问题。