隐藏在页脚后面的图像/图标

Question

我正在开发一个 bigCommerce 网站。我在页脚中添加了一些 CSS，因为它下面有一个丑陋的空白。但是现在，mcAfee 图像/图标隐藏在页脚后面。我尝试了许多在网上找到的解决方案，但似乎没有任何帮助。 这是我的代码 我现在也添加了 html 文件：

<div class="mfes-trustmark loaded" data-type="102" data-width="120" data-height="50" title="McAfee SECURE" aria-label="McAfee SECURE" tabindex="0" style="width: 120px; height: 49px; display: inline-block; background-image: url(&quot;https://cdn.ywxi.net/meter/24hr.supply/102.svg?ts=1607105520051&amp;l=en-US&quot;); background-size: contain; background-position: center top; background-repeat: no-repeat; cursor: pointer;"></div>

这是页脚的代码：

.footer {
    padding: 0;
    border-top: 0;
    color: #fff;
    position: absolute;
     width: 100%;
}
my template

<div class="container">
    <section class="footer-info">

        <article class="footer-info-col" data-section-type="footer-categories">
            <h5 class="footer-info-heading">Categories</h5>
            <ul class="footer-info-list">
                <li>
                    <a href="https://xxx/">Kitchen &amp; Bath</a>
                </li>
                <li>
                    <a href="https://xxx/">septic risers</a>
                </li>
                <li>
                    <a href="https://xxx/">Heating</a>
                </li>
                <li>
                    <a href="https:xxx/">Plumbing</a>
                </li>
            </ul>
        </article>

        <article class="footer-info-col" data-section-type="footer-webPages">
            <h5 class="footer-info-heading">Navigate</h5>
            <ul class="footer-info-list">
                <li>
                    <a href="https://xxx/">Privacy Policy</a>
                </li>
                <li>
                    <a href="https://xxx/">Terms &amp; Conditions</a>
                </li>
                <li>
                    <a href="/account.php">My Account</a>
                </li>
                <li>
                    <a href="/account.php?action=order_status">Orders</a>
                </li>
                <li>
                    <a href="https://xxx/">Shipping &amp; Returns</a>
                </li>
                <li>
                    <a href="https://xxx/">FAQ</a>
                </li>
                <li>
                    <a href="https://xxxcation/">RSS Syndication</a>
                </li>
            </ul>
        </article>

        <article class="footer-info-col" data-section-type="storeInfo">

            <ul class="fa-ul">
                <li><i class="fa-li sl-icon-phone"></i><a href="tel:xxx">xxx</a></li>

                <li><i class="far fa-envelope fa-li"></i><a href="/contact-us/">Contact Us</a></li>
                <li><i class="fas fa-at fa-li"></i><a href="mailto:xxxr.supply">xxx.supply</a></li>
                <li>We accept all major credit cards.</li>
                <li></li>
                <img width="200" height="31"
                     src="https://cdn11.bigcommerce.com/s-f88khxqj3n/product_images/uploaded_images/credit-card-logos-1.jpg">
            </ul>

        </article>


        <article class="footer-info-col footer-info-col--newsletter">
            <div class="emthemesModez-newsletterSection emthemesModez-newsletterSection--hasSocials">
                <article class="" data-section-type="newsletterSubscription">
                    <h5 class="footer-info-heading">Signup</h5>
                    <p>Get the latest updates on new products and upcoming sales</p>

                    <form class="form" action="/subscribe.php" method="post">
                        <fieldset class="form-fieldset">
                            <input type="hidden" name="action" value="subscribe">
                            <input type="hidden" name="nl_first_name" value="bc">
                            <input type="hidden" name="check" value="1">
                            <div class="form-field">
                                <label class="form-label is-srOnly" for="nl_email">Email Address</label>
                                <div class="form-prefixPostfix wrap">
                                    <input class="form-input form-prefixPostfix-input" id="nl_email" name="nl_email"
                                           type="email" value="" placeholder="Your email address">
                                    <button class="button form-prefixPostfix-button--postfix" type="submit"><i
                                            class="fas fa-chevron-right"></i></button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </article>
            </div>
        </article>

    </section>
</div>
<div class="footer-copyright">
    <div class="container">
        <p class="powered-by">
            © <span id="copyright_year">2020</span> xxx.
            <script type="text/javascript">
                document.getElementById("copyright_year").innerHTML = new Date().getFullYear();
            </script>

            <a href="/sitemap.php">Sitemap</a>
        </p>

    </div>
</div>

```

Answer 1

在内联 CSS 中更改 McAfee 图像的高度。

<div class="mfes-trustmark loaded" data-type="102" data-width="120" data-height="50" title="McAfee SECURE" aria-label="McAfee SECURE" tabindex="0" style="width: 120px; height: /*---- change this value to 70px---*/ 49px; display: inline-block; background-image: url(&quot;https://cdn.ywxi.net/meter/24hr.supply/102.svg?ts=1607105520051&amp;l=en-US&quot;); background-size: contain; background-position: center top; background-repeat: no-repeat; cursor: pointer;"></div>

这是一个有效的 JSfiddle 演示：

https://jsfiddle.net/Buubiye/xzwy1na4/4/