班级.content
的背景图片不起作用。 PS:等待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>
答案 0 :(得分:1)
你的道路是错的。您的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
文件。
答案 1 :(得分:0)
将../放在网址路径
之前 background-image: url(noisy-texture-100x100-o5-d20-c-333333-t0.png);
。
所以,它应该看起来像
background-image: url('../noisy-texture-100x100-o5-d20-c-333333-t0.png');
答案 2 :(得分:0)
background-image: url("../noisy-texture-100x100-o5-d20-c-333333-t0.png");
尝试这样
编辑:如上所述,你的道路是错误的。在url(
之后你忘记了&#39; ../并在最后#39;)(你忘记了引用)