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文件。我重新启动电脑后，现在必须重新输入图像路径。

CSS背景图片在Wordpress上不起作用

2 个答案: