Question

我有一个HTML代码段如下

＆＃13;

.footer {
   	padding: 20px 0 30px;
   	position: relative;
   	background : $footerBGColor;
}
   
.footer:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.1;
    background-image: url('https://images.unsplash.com/photo-1438368915865-a852ef86fc42?q=80&fm=jpg&s=15e4744077e36852ba57f46f4660dc7a');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

＆＃13;

<div class="footer">
    <div class="container">
       
        <div class="row">
            <div class="col-md-8 md-margin-bottom-40">
                <h2>About</h2>
                <p class="margin-bottom-25 md-margin-bottom-40">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, necessitatibus!
                    <span><a href="#" class="small"><i class="fa fa-external-link"></i></a></span>
                </p>    

               
            </div>
            <div class="col-md-4 footerImage">

                <h2>Contact Us</h2>
                <address class="md-margin-bottom-40">
                    <ul class="list-unstyled address">
                        <li>Lorem</span></li>
                        <li>Lorem ipsum</li>
                    </ul>
                </address>
            </div>
        </div>
    </div> 
    <div class="copyright">
        <div class="container">
            <div class="row col-md-11">
            <p class="text-center">
                <small><?php echo(date('Y')) ?> &copy; All Rights Reserved. 
                <small><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></small></small>
            </p>
            </div>
        </div> 
    </div>
</div>

＆＃13;

我打算将footer.svg显示为页脚的背景。我注意到如果我从页脚中删除内容样式：之前，页脚中的链接工作，但背景图像不会呈现。但是，如果我启用了内容样式，则我的链接无法正常工作，但不会呈现背景图像。

你可以帮我解决这个问题吗？

运行代码段时，请注意链接不起作用。如果您删除了内容，则代码段会正常运行。

谢谢

关心 GAGAN

Answer 1

您的背景图片覆盖了所有内容。将“.footer：before”z-index更改为“-1”。

Answer 2

尝试更改

z-index: 1 to -1

https://jsfiddle.net/geradrum/vcfee42L/

如何在页脚中启用链接

2 个答案: