.content 类的背景图片无效。 PS:WAITING 10 秒让预加载器淡出。
文件夹的设置方式:
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
width: 100px;
height: 100px;
background-color: #00c4ff;
position: absolute;
z-index: 1001;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 50%;
height: 100%;
z-index: 1000;
background: #1c262b; /* Old browsers */
background: -moz-linear-gradient(top, #1c262b 0%, #3c4b57 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c262b), color-stop(100%,#3c4b57));
background: -webkit-linear-gradient(top, #1c262b 0%,#3c4b57 100%);
background: -o-linear-gradient(top, #1c262b 0%,#3c4b57 100%);
background: -ms-linear-gradient(top, #1c262b 0%,#3c4b57 100%);
background: linear-gradient(to bottom, #1c262b 0%,#3c4b57 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c262b', endColorstr='#3c4b57',GradientType=0 ); /* IE6-9 */
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%); /* IE 9 */
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader {
opacity: 0;
}
.loaded #loader-wrapper {
visibility: hidden;
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper .loader-section.section-right,
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.3s 0.3s ease-out;
}
.loaded #loader-wrapper {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url(noisy-texture-100x100-o5-d20-c-333333-t0.png);
color: #000000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script>
var startTime = Date.now();
window.addEventListener("load", function(){
var load_screen = document.getElementById("load_screen");
setTimeout(function() {
document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded");
}, Math.max(0, 10000 - (Date.now() - startTime)));
});
</script>
</head>
<body>
<div id="loader-wrapper">
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div id="loadingbar-frame"></div>
<div id="loader"></div>
</div>
<div class="content"> </div>
</body>
</html>最佳答案
你的路径是错误的。您的 css 文件与图像不在同一文件夹中，因此您不能使用 background-image: url(noisy-texture-100x100-o5-d20-c-333333-t0.png);。请改用以下内容:
background-image: url("../noisy-texture-100x100-o5-d20-c-333333-t0.png");
这将上升 1 个文件夹。 url() 属性是相对于您的 .css 文件计算的，而不是您的 .html 文件。
关于html - 我的背景图像不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29236410/