CSS背景图像不适用于Wordpress

Question

我是 Wordpress 主题开发的新手。 我试图将静态 html 主题转换为 wordpress，但我的背景图片不起作用这是代码

<div class="hero-slides owl-carousel">
            <!-- Single Slide -->
            <div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg1.jpg);"></div>
            <!-- Single Slide -->
            <div class="single-hero-slide bg-img background-overlay" style="background-image: url(http://localhost/wordpress/wp-content/uploads/2018/07/bg2.jpg);"></div>
</div>

当我检查元素时，背景图像 url() 显示为空。 静态 html 页面工作正常。

Answer 1

首先检查滑块的所有 JS 和 CSS 文件是否正确加载到页面中。

要获取主题目录的路径，请使用<?php bloginfo('template_directory'); ?>

然后在你的 html 中你可以使用它作为图片的路径

<div class="single-hero-slide bg-img background-overlay" `style="background-image: url(<?php bloginfo('url'); ?>/wp-content/uploads/2018/07/bg1.jpg);"></div>

我的猜测是这是加载 js 文件的问题，通过调试控制台来仔细检查浏览器中开发人员工具的错误。

Answer 2

对不起各位误报。问题出在我的编辑器上。它没有保存 php 文件。我重新启动了我的电脑，现在它必须重新输入图像路径。