我的背景图像不工作

Question

class.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">&nbsp;</div>
    </body>
</html>

Answer 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 文件。

Answer 2

把../放在URL路径前面

background-image: url(noisy-texture-100x100-o5-d20-c-333333-t0.png);。

所以，它应该看起来像

background-image: url('../noisy-texture-100x100-o5-d20-c-333333-t0.png');

Answer 3

background-image: url("../noisy-texture-100x100-o5-d20-c-333333-t0.png");

像这样尝试

编辑：如前所述，您的路径是错误的。在 url( 之后你忘记了 '../ 和最后 ') （你忘记了引号）

我的背景图像不工作

My background-image is not working

html

css

background

image