php - 用于视差背景的图像是从 http 本地主机而不是 style.css 中的 wordpress url 中提取的

Question

我为我建立的 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;
    }

我转到该页面，但没有显示图像。我去“检查”并收到以下错误:

(index):1 Mixed Content: The page at 'https://mywebsite.com/' was loaded over HTTPS, but requested an insecure image 'http://localhost/wpthemes/wordpress/wp-content/uploads/2017/12/image.png'. This content should also be served over HTTPS. img.png Failed to load resource: net::ERR_CONNECTION_REFUSED

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

所以我转到“查看页面源代码”，果然，在 style.css 文件中，它正在拉本地主机链接'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，但我还没有遇到任何具体的事情。

提前感谢您的帮助。

Answer 1

为此，您可以使用 PHP 函数 get_stylesheet_directory_uri() 来帮助您设置相对路径。

get_stylesheet_directory_uri(): Retrieves stylesheet directory URI for the current theme/child theme. Checks for SSL.

将此 PHP 放入您的 HTML 中:

<?php echo get_stylesheet_directory_uri(); ?>

它将回显您当前的样式表目录。

之后，比较图像路径和样式表路径，然后执行如下操作:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/aternus.png" alt="" width="" height="" />

或者，在找到sylesheet 路径 之后，您可以在CSS 中为图像 编写相对路径像这样:

background-image: url('./../uploads/2017/12/image.png');
// explanation: /. means current folder, ../ means one folder back (up)