Question

我在移动设备上显示我的第一个网站时遇到了一些麻烦。当设备是垂直的时，网站背景图像不适合我尝试使用background-size：100％100％规则的整个屏幕，但也不起作用。这是我现在的css：

background-attachment: scroll;
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;

最后一个麻烦是页脚。即使在某些PC上，它也不会粘在屏幕的底部。这是css：

<footer id="colophon" class="site-footer" role="contentinfo">

#colophon {
    background: #000 none repeat scroll 0 0;
    color: #ffffff;
    opacity: 0.8;
    padding: 20px;
}

我尝试使用底部：0px但不起作用，这就是全部。

提前致谢。

Answer 1

要使背景图片填满整个屏幕，您可以使用background-size: cover。你还需要让身体保持100％的高度。

body.custom-background {
    background-image: url('http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg');
    background-size: cover;
    height: 100vh;
}

然而，对于当前的背景图像，它看起来并不正确。您可能想要制作这2张图片。

对于页脚，假设它仅适用于此站点并且您不会更改高度，或者您可以相应地更改CSS，您可以将页面ID设置为屏幕高度的100％并添加底部填充至少与页脚一样高。

#page {
    position: relative;
    z-index: 999;
    margin: auto;
    min-height: 100vh;
    padding-bottom: 250px;
}

然后你可以给colofon一个绝对的定位。

#colophon {
    background: #000;
    opacity: 0.8;
    color: #ffffff;
    padding: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

在移动设备上使用wordpress的问题

1 个答案: