Question

我在html标签中向背景网站添加背景图片时遇到问题。问题出在这里：

html{
background:url('assets/img/jp-logo.png'); /*background image*/
background-image:url('assets/img/jp-logo.png'); /*background image*/
-webkit-background-size: cover;
-moz-background-size: cover;
}

我输入了背景和背景图像，因为我测试其中一个是否与背景大小一起工作：覆盖，但没有一个。我还检查了我的文件目录路径，这些也很好。我想知道为什么不应该发生这种情况。我在一个seaprate html和css测试表上测试它并且它工作，但为什么不在这里对我来说是可疑的。完整代码：http://jsfiddle.net/TheAmazingKnight/kjLg8/

我制作的这个简短的样本有效：

<!doctype html>
<html lang="en">
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="test.css" type="text/css" media="screen" /> <!--CSS for desktop screens-->
</head>
<body>
    <p>hello</p>
    <img src="jp-logo.png" alt="jp-logo.png" />
</body>
</html>

html{
background-image:url('assets/img/jp-logo.png');
}

Answer 1

html没有语义价值。请改用body。您可能想要body一个margin:0;。

Answer 2

我改变了你的背景照片并将其放入了这样的身体元素：

body{

    background:url(http://technomarketer.typepad.com/technomarketer//Radiohead_wallpaper.jpg); /*background image*/

-webkit-background-size: cover;
-moz-background-size: cover;

并且有效。

所以，也许你的照片路径（assets / img / jp-logo.png）是错误的。

你看过了吗？

Answer 3

html{
background:url("assets/img/jp-logo.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我发现这段代码非常完美，可以在信用到期时给予信用： http://css-tricks.com/perfect-full-page-background-image/

Answer 4

如果你想在html页面中编写css代码就像这样

<head>
<title>hello</title>
<style type="text/css">
html{
background: url(photo.jpg);
}
</style>
</head>

并且图片网址不在引号'image.jpg'之间并且最好使用body代替html

为什么我的背景图片不显示在html标签中？

4 个答案: