解决使用[shortcode]设置背景图像的方法？

Question

• 我想在<div>容器</div>设置随机的背景图像
  • 为了简单起见，我使用[shortcode]安装了一个插件来显示随机图像。 这很好。
  • 如何使简码[wp-image-refresh]与background-image:url(...)一起使用
  • 我什至以内联样式尝试过，但没有结果。

这就是我所拥有的：

的HTML

<div class="header_random-image">
   <div id="hero"></div>
</div>

的CSS

#hero {
  background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
  background-size: cover;
  background-position: 50% 30%;
  height:70vh;
  width: 100%;
  margin-top: -65px;
}

没有结果的另一种尝试：内联样式

<div class="header_random-image">
        <div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>

有人愿意提供帮助吗？ 还是有人有简单的解决方案来放置div-random-background-images？

柏林最好的

Answer 1

在大多数情况下，您的CSS代码将以静态文件形式提供，因此php代码将无法执行。

由于内联示例也不起作用，因此我想短代码不会返回图像网址，而是返回完整的图像标签。 插件的说明证实了这一假设。 WP-IMAGE-REFRESH

您可以尝试以下方法：

的PHP

<div class="header_random-image">
   <?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>

的CSS

.header_random-image {
  overflow: hidden;
}
.hero_class {
  height: 100%;
  width: auto;
  margin-top: 0;
}

这应该显示图像。 如果需要（使用弹性框），您仍然必须将其居中，并根据上传图像的宽高比检查不同屏幕尺寸引起的问题，并使用Javascript解决它们。

另类

如果要在所有视图上使用相同的图像，请使用ACF Pro并将库字段添加到帖子/页面或选项页 。

的PHP

<?php 
    $images = get_field('name-of-your-gallery-field');
    shuffle($images);
    $imageUrl = images[0]['url'];
<div class="header_random-image">
    <div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>