Question

在我的项目中，页脚的背景为背景。

我将其设置在CSS中。您可以在下面看到它。仅在大屏幕设备上看起来不错，但在移动屏幕上却很难看。如何使图像响应？

我在前端没有太多经验，我想知道有哪些选择？

我顺便使用了引导程序4。

这里是指向jsfiddle的链接。

/*
 * START: Footer
 */
footer {
    background: url('http://enjoyjumping.kz/static/img//footer.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 500px;
    bottom: 0;
    position: absolute;
}

footer .row {
    align-items: flex-end;
}

.flex-container {
    display: flex;
    flex-direction: column;
}

.flex-container > div {
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

.social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.social__button {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border-color: #fff;
    position: relative;
    cursor: pointer;
    margin: 5px;
    text-align: center;
}

.social__button i {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    height: 70px;
    line-height: 70px;
    width: 70px;
    font-size: 30px;
    z-index: 2;
    transition: 0.3s;
    color: black;
    border: 2px solid;
    border-radius: 100%;
}

.social__button i:hover {
    color: white;
}

.copyright {
    margin-bottom: 2.1rem !important;
    font-size: 18px;
    font-weight: bold;
}

.menu-link {
    color: black !important;
    font-weight: bold;
}

.menu-link-li {
    margin: 10px;
}

.footer-menu {
    margin-bottom: 0.7rem !important;
}

/*
 * END: Footer
 */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-sm text-center footer-menu">
            <ul class="list-unstyled">
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" href="/about/">About Us</a>
                </li>
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" data-toggle="modal" data-target="#citiesModel" style="cursor: pointer;">Our clubs</a>
                </li>
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" href="/coaches/">News</a>
                </li>
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" href="/bonus/">Events</a>
                </li>
            </ul>
        </div>
        <div class="col-sm text-center">
            <div class="flex-container">
                <div class="w-100">
                    <div class="social">
                        <a href="#" class="social__button facebook">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="social__button instagram">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="social__button vk">
                            <i class="fa fa-vk"></i>
                        </a>
                        <a href="#" class="social__button youtube">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>
                <div class="w-100">
                    <span>+7(701)</span><strong>262-47-50</strong>
                </div>
            </div>
        </div>
        <div class="col-sm text-center">
            <p class="copyright">Copyright © 2018 example.com</p>
        </div>
    </div>
</div>
</footer>

Answer 1

您需要更改background-size的{{1}}和background-position属性：

<footer>

看到它正常工作：https://jsfiddle.net/7mejchb8/11/

根据评论进行编辑：请参见此示例，以了解如何在所有设备上将页脚固定在页面底部，同时允许页脚高度可变，而无需使用footer { background: url('http://enjoyjumping.kz/static/img/footer.png') no-repeat top center /cover; }：https://jsfiddle.net/websiter/d4n1sxop/

它后面的CSS是：

position:absolute

如何使页脚图像响应移动设备？

1 个答案: