解決使用[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>