html - 存在背景图片但不可见

在以下站点http://haircolourideas.eu/#section2上，我在“服务”部分有一个ul，而li的有背景图像。 li具有service1，service2等类别。背景图像突然变得不可见。如果我检查元素的css是正确的，则表明存在图像。该网站已经启用了几个月，没有我进行任何更改，今天就发生了

<ul id="services-list" class="hidden">
    <li class="service1 service-img"><label class="btn" for="modal-1"><h3>meche</h3></label></li>
    <li class="service2 service-img"><label class="btn" for="modal-2"><h3>tinting</h3></label></li>
    <li class="service3 service-img"><label class="btn" for="modal-3"><h3>fashion</h3></label></li>
    <li class="service4 service-img"><label class="btn" for="modal-4"><h3>change</h3></label></li>
</ul>

.service1 {
    background: url(../img/meche1.png);
    cursor: pointer;
}

.service2 {
    background: url(../img/tint1.png);
    cursor: pointer;
}

.service3 {
    background: url(../img/fashion1.png);
    cursor: pointer;
}

.service4 {
    background: url(../img/change1.png);
    cursor: pointer;
}

最佳答案

问题在于动画无法正常运行，因为在ul中您具有class="hidden"，该opacity: 0使得ul隐藏了所有class="hidden"部分。之所以应用，是因为您的服务器jquery.viewportchecker.js中缺少此脚本。如果使用inspect元素打开控制台，则会看到错误。该脚本根据您所在的部分使隐藏类适用或不适用。您可以通过某种方式从服务器中删除该脚本，如链接所示：http://haircolourideas.eu/js/jquery.viewportchecker.js，因此您必须将其放回原处，并且还会出现此jquery错误：
“未捕获的TypeError：jQuery（...）。addClass（...）。viewportChecker不是函数”
 在您的控制台中将消失，该网站将像以前一样运行

关于html - 存在背景图片但不可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36478015/