CSS - 带有文字的响应式背景图片

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

我清除了您在 HTML 和 CSS 中的许多多余内容，将其精简到最基本的部分。您可能需要添加一些小的样式(填充边距等以使两个菜单列表项匹配，但它大部分都在那里。

我可以说，再多花一点时间，HTML 和 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;
}