图片背景未使用CSS加载
[英]Image background not loading with CSS
问题描述
好的，我无法对其他任何问题发表评论，这就是为什么我要发布一个新问题。
#head { text-align: center; font-family: roboto; } body, html { height: 100%; } .parallax { background-image: url('.../pics/parallax.jpg'); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/text.css"> <script src="scripts/jquery-3.1.0.min.js"></script> <script src="scripts/jquery.animate-color.js"></script> <script src="scripts/custom_scripts.js"></script> <title>Yadullah.me</title> </head> <body> <h1 id="head"> Hi there!</h1> </body> </html>
很简单吧？ 但是由于某种原因，背景图像只是拒绝显示。
我已经在同一文件夹中尝试过CSS，HTML和图像，但没有成功。 在不同的子目录中尝试过，没有成功。
我已经检查了文件名，扩展名和所有这些东西。 试过不加引号，什么都没有。 甚至尝试了不同的图像。 尝试同时删除所有其他CSS文件，但没有任何效果。
3 个解决方案
解决方案1
3 2016-12-15 19:29:13
您的style属性中有太多停靠点。 您的CSS应该如下所示：
.parallax {
background-image: url('../pics/parallax.jpg');
...
}
解决方案2
0 2016-12-15 19:32:22
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg'); // In Here try put absolute URL or change .../ in ../
height: 100%;
width:100%; //and try add width
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
解决方案3
0 2016-12-15 20:53:20
You can try add base tag for example like this
<!doctype html>
<html>
<head>
<base href="http://YourSite.com/">
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</body>
</html>
CSS 背景图像未加载
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.