0

我正在使用 Raspberry Pi 和 Screenly-OSE 作为我们药房的数字标牌解决方案。我展示各种广告以及过夜。我正在使用一个非常简单的 Sinatra 应用程序来提供过夜服务。效果很好，除了一个让我很烦恼的小细节，那里有一个空白区域：见图片。

我正在使用以下非常简单的 css 文件：

body {
    /* background-color: #246013; */
    background-image:url('moon.jpg');
    color: white; 
    text-align: center;
    font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#wrapper{
    width:1200px;
    margin:0 auto;
    text-align: center;
}

#content{
    text-align: center;
    margin:auto;
}

#footer{
    text-align: center;
    padding-top: 30px;
    color: #D6D6D6;
    font: 14px "Courier New", Courier, mono;
}

h1 {
    font-size: 80px;
    padding-top: 10px;
    font-weight: bold;
    text-align: center;
}

h2 {
text-align: center;
font-size: 60px;
font-weight: bold;
}


h3 {
    text-align: center;
    font-size: 32px;
    padding-top: 10px;
    padding-bottom: 3px;
    font-weight: bold;
}

h4 {
    text-align: left;
    font-size: 25px;
    padding-top: 5px;
    padding-bottom: 3px;
    text-decoration: underline;
}

h5 {
    text-align: left;
    font-size: 23px;
    padding-top: 5px;
    padding-bottom: 3px;
    font-weight: bold;
}

我想知道是否有办法获得全屏背景封面。背景图片封面与文字一起出现，显示某些天数，如果天数为 5 或 6，则覆盖整个屏幕。

我知道我可以通过添加br/和/或计算显示的文本行来模拟这种行为。但我想知道是否还有其他更自然的方法可以实现这一目标。

谢谢

4

1 回答 1

1

确保将 html 和 body 都设置为 100% 高度以使它们覆盖所有内容。

html, body {
    height: 100%;
}
于 2013-08-01T17:38:16.630 回答