Question

我正在尝试设置通过自定义字段插件上传的图片，并将其显示为div的背景（在滑块中使用）。

然而，图像没有显示...我在自定义字段中有文字，显示没问题所以我认为它与我用来拉动图像的代码行有关。

我正在尝试使用图片设置.slide1的背景。

自定义字段名称为slide1_background。

HTML：

<div class="slide1" style="background-image:url('<?php the_field('slide_bg1'); ?>');">
<div class="slide1-cont"><p class="slide-text">
<h1><?php the_field('slide_title1'); ?></h1>
<img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content1'); ?></p></div>
</div>

CSS：

.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}

Answer 1

在您尝试设置背景图片的位置查看代码中的差异，将其与另一个答案中的注释中的代码进行比较，将其设置为图像来源。

the_field('slide_bg1')返回一个数组，因此您尝试将背景图像源设置为PHP数组，该数组将转换为字符串“Array”，因此在HTML中它将如下所示：{{1 }}

您需要先获取该字段，然后将返回数组的background-image:url('Array')元素作为背景图像的源回显：

url

Answer 2

使用echo

<div class="slide1" style="background-image:url('<?php echo the_field('slide_bg1'); ?>');">

wordpress高级自定义领域背景图像

2 个答案: