我使用以下css文件生成一个简单的布局作为测试:
@font-face {
font-family: blackboard;
src: url('../fonts/KGTenThousandReasons.ttf');
}
body {
font-family: blackboard;
font-size: 1.3em;
color: #FFF;
margin: 0px;
}
html {
background-image: url('../images/Chalkboard.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.container {
margin: 0 auto;
width: 980px;
}
#header {
text-align: center;
margin-top: 15px;
}
#header p {
font-size: 0.5em;
}
#left_column {
float: left;
}
#right_column {
float: right;
}
.list {
}
.list li {
margin: 5px;
}
.list ul {
list-style-type: none;
font-size: 0.7em;
}
.list2 {
position: relative;
width: 200px;
list-style-type: none;
top: 75px;
right: 100px;
font-size: 0.6em;
float: left;
}
.clear_both {
clear: both;
}
#footer {
width: 100%;
height: 50px;
font-size: 0.5em;
}
.small_container {
position: relative;
top: 25%;
height: 100%;
text-align: center;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: gray;
}
.selected {
color: gray;
font-weight: bolder;
}
.paginate {
border: 1px solid whitesmoke;
padding-left: 10px;
padding-right: 10px;
margin: 5px;
}
#pagination {
padding-top: 10px;
}
h1 {
font-size: 1.1em;
}
我遇到的问题是当我将其上传到我的托管服务时,html标签的背景图片不会显示出来。它在我的本地机器上完美运行。我特别谈到的是这些:
html {
background-image: url('../images/Chalkboard.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
字体很好,其他一切都很好,只是背景图像不会产生结果。任何帮助都会很棒。
答案 0 :(得分:2)
将“background-image”更改为“background”。
html {
background: url('../images/Chalkboard.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
答案 1 :(得分:0)
您确定图片的路径是否正确?您没有意外忘记上传,或将其上传到本地计算机上的其他文件夹...在Chrome检查器中检查它以查看浏览器是否可以实际找到图像。或者尝试设置图像的绝对路径而不是相对路径。