我为我创建的wordpress网站创建了一个视差滚动效果。使用了以下html和css：

HTML

<div class="container-above"></div> 

<!-- Parallax Container element -->
<div class="parallax"></div>

<div class="container-below"></div>

css

.parallax { 
        /* The image used */
        background-image: url("https://mywebsite.com/wp-content/uploads/2017/12/image.png");

        /* Set a specific height */
        height: 500px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

我进入页面，图像没有出现。我去“检查”，得到以下错误：



（索引）：1混合内容：页面位于'https://mywebsite.com/'已通过HTTPS加载，但请求了不安全的映像'http://localhost/wpthemes/wordpress/wp-content/uploads/2017/12/image.png“。此内容也应通过HTTPS提供。img。png加载资源失败：net:：ERR_连接被拒绝

这基本上意味着由于图像不在https url下，chrome不会显示它，因为技术上它不安全。这没有多大意义，因为我使用的图片网址是从wordpress网站的媒体库中提取的https。

所以我转到“查看页面源”，果然，在style.css文件中，它正在拉localhost链接“http://localhost/wpthemes/wordpress/wp-content/uploads/2017/12/image.png”，而不是wordpress图像链接。

所以我回到FTP中的style.css，但是css仍然是一样的：

.parallax { 
            /* The image used */
            background-image: url("https://mywebsite.com/wp-content/uploads/2017/12/image.png");

            /* Set a specific height */
            height: 500px;

            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

有人能解释一下吗？起初我认为这是缓存问题，但我在chrome中以匿名模式加载了该站点，得到了相同的效果和错误。

我觉得我需要用wordpress做一些事情，也许是将图像插入html而不是css，但我还没有遇到任何具体的东西。

提前感谢您的帮助。