替代

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专业版并在帖子/页面或gallery field添加option page。

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>

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

1 个答案:

替代