Question

我希望有人能帮我解决问题。我正在移动网站上工作，我需要页脚背景图像响应中心位于此图像上的页脚链接。为了使背景图像响应，我使用了该代码：

#footer-bg {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url("../img/background.jpg");
    }
#footer-bg .inner-footer {
    padding-top: 39.06%;
    display: block;
    height:0;
}

它可以作为一种魅力，但是当我添加链接时，它们会在页面底部偏离位置。有没有解决的办法？提前感谢您的帮助。

这里的JSfiddle代码http://jsfiddle.net/4kuUm/

为了澄清，我希望链接和版权标志位于图像上而不是图像的底部。

Answer 1

<div class="footer-container">
    <footer class="wrapper"> <span id="footer-bg" role="img" aria-label="Footer">
        <div class="social-icons" style="padding:25px;">
            <ul>
                <li><a href="#"><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook"></a>
                </li>
                <li><a href="#"><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram"></a>
                </li>
                <li><a href="#"><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter"></a>
                </li>
            </ul>
        </div>
        <div class="f-links" style="padding:25px;">
            <ul>
                <li><a href="#">About Us</a>
                </li>
                <li><a href="#">Contact Us</a>
                </li>
                <li><a href="#">Terms & Conditions</a>
                </li>
             </ul>
        </div>
        <!-- /f-links -->
        <div class="divider">
            <p>© ALL RIGHTS RESERVED.</p>
        </div>
    </footer>
 </div>

这适用于我的朋友：）

Answer 2

我清除了HTML和HTML中的许多额外内容。 CSS将其剥离为必不可少的骨骼。您可能需要添加一些小样式（填充边距等以使两个菜单列表项匹配，但它主要在那里。

我可以说，加上一点点额外的时间HTML＆amp; CSS可以进一步削减。

JSfiddle Demo

<强> HTML

<div class="footer-container">
    <footer class="wrapper">
        <div class="social-icons">
            <ul>
                <li><a href="#"><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook"/></a>
                </li>
                <li><a href="#"><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram"/></a>
                </li>
                    <li><a href="#"><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter"/></a>
                </li>
            </ul>
        </div>

        <div class="f-links">
            <ul>
                <li><a href="#">About Us</a>
                </li>
                <li><a href="#">Contact Us</a>
                </li>
                <li><a href="#">Terms & Conditions</a>
                </li>
            </ul>
        </div>
        <!-- /f-links -->
        <div class="divider">
            <p>© ALL RIGHTS RESERVED.</p>
        </div>
    </footer>
</div>

<强> CSS

.footer-container footer {
    color: #000000;
    padding: 20px 0;  
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url("http://queermeup.com/wp-content/uploads/2010/10/background-2-640x250.jpg");
}
.social-icons {
    text-align:center;
}
.social-icons ul,
.f-links ul {
    list-style:none;
    width:50%;
    margin:0 auto;
    text-align: center;
}

.social-icons li,
.f-links li {
    display: inline-block;
    width:30%;
}

.f-links a {
    font-size:12px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    text-decoration: none;
    color: black;
    padding:2px 10px;
    white-space:nowrap;
}
.f-links a:hover {
    text-decoration: underline;
}
.divider {
    padding:0;
    margin:0;
}
.divider p {
    margin: 0 5%;
    text-align:center;
    border-top: 1px solid #000;
    font-size:11px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

CSS - 响应背景图像与文本

2 个答案: