Question

我的背景加载时间有问题。

最初我有幻灯片背景（下面有以下JS代码），但我决定只有1张图片背景。因此，每次我在我的网站上点击时，都会出现白色背景，因为脚本加载缓慢：

我尝试像下面的CSS一样设置背景，但它无法正常工作。背景是滚动并自行重新拍摄，或者不调用背景。

如何使背景与现在在我的网站上完全一致，但使用CSS代替JS？

CSS

html { 
  background: url(images/background/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

这是JS代码：

$(document).ready(function() {

// Supersized Background Images
$.supersized({
    // Functionality
    slide_interval          :   6000,           // Length between transitions
    transition              :   1,              // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
    transition_speed        :   300,            // Speed of transition
    navigation              :   10,                 // Slideshow controls on/off

    // Components                           
    slide_links             :   'blank',        // Individual links for each slide (Options: false, 'num', 'name', 'blank')
    slides                  :   [               // Slideshow Images

    {image : 'https://vouzalis.com/images/background/bg2.jpg'},
    {image : 'https://vouzalis.com/images/background/bg2.jpg'},
    {image : 'https://vouzalis.com/images/background/bg2.jpg'}                                                                                  
        ]
});

Answer 1

确保给出正确的图像路径，或者只提供如下所示的完整路径。

html { 
  background-image: url('https://vouzalis.com/images/background/bg2.jpg'); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment:fixed;
}

Answer 2

那里肯定是一个错字：

background-repeat: no-reapet;

那应该是no-repeat。

将背景从JS更改为CSS

2 个答案: