Question

我想应用背景颜色，高度为200px。然后，我想将此背景颜色放在相关内容的底部。我已经设法在我正在处理的其他网页上实现这一点，但是在这个页面上苦苦挣扎。无论我做什么，背景颜色都保留在内容容器的顶部。

HTML / PHP：

use std::io::Read;
use std::fs;

trait MyObjectReader {
    type R: Read;

    fn new(Self::R) -> Self;

    fn from_filename(filename: &str) -> Self where Self: Sized;
}

struct MyFileReader;

impl MyObjectReader for MyFileReader {
    type R = fs::File;

    fn new(_: Self::R) -> Self {
        MyFileReader
    }

    fn from_filename(filename: &str) -> Self
        where Self: Sized
    {
        let open_file = fs::File::open(filename).unwrap();
        Self::new(open_file)
    }
}

CSS

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

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

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

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

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

2 个答案: