Question

我在页脚标记中遇到属性background-image的问题。我使用双背景：第一层是条纹图案，第二层是通过属性-linear-gradient-生成的。在标题和正文部分工作正常（我使用相同的机制）。我正在使用bootstrap框架。

我的HTML：

<footer class="text-center">Baron &#8482; New Website Menager Platform</footer>

我的CSS代码：

footer {
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    background-color:#111111;
    background:url(../images/stripe-pattern-footer.png) center repeat, linear-gradient(to top, #2B2A2B 0%, #111111 100%);
    background:url(../images/stripe-pattern-footer.png) center repeat, -webkit-linear-gradient(top, #2B2A2B 0%, #111111 100%);
    background:url(../images/stripe-pattern-footer.png) center repeat, -moz-linear-gradient(top, #2B2A2B 0%, #111111 100%);
    background:url(../images/stripe-pattern-footer.png) center repeat, -ms-linear-gradient(top, #2B2A2B 0%, #111111 100%);
    background:url(../images/stripe-pattern-footer.png) center repeat, -o-linear-gradient(top, #2B2A2B 0%, #111111 100%);
    background:url(../images/stripe-pattern-footer.png) center repeat, -khtml-linear-gradient(top, #2B2A2B 0%, #111111 100%);
    border: 1px solid #000000;
    -moz-box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
    -webkit-box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
    box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
}

请帮助或提供说明。

好的，我找到了这个问题的解决方案 - 这是错误的url构造。

Answer 1

我认为您使用的footer.png可能存在问题。您可能没有包含它或在命名时出现拼写错误或路径可能不正确。

我用你提供的代码创建了一个jsfiddle并使用了css模式 - 它工作正常。

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC) center repeat, linear-gradient(to top, #2B2A2B 0%, #111111 100%);

<强>的jsfiddle http://jsfiddle.net/LWDT5/

在页脚标签问题中的双背景图像

1 个答案: