带有图像的 ACF post，与 html 和 css 一起使用

Question

我查询了一个 post，里面有一张图片和一个名字，但我想使用这张图片作为背景，并在中间添加一个文本，如下所示：

http://gyazo.com/d71a4cc0a7afeaa672b9b3a7d22bc092

当两个元素都在 php 变量中时，如何将此图像用作文本位于中心的框中的背景？

这是我的代码：

    <?php
        $args = array(
    'post_type' => 'alimento',
);

$the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post(); 

            $nombre = get_the_title();
            $imagen_1 = get_field('imagen_principal_alimentos');
            ?>
            <div class="col-sm-4">
                <img src="<?php echo $imagen_1['url']; ?>">
            </div>

            <?php
        } 
    } 

    ?>

Answer 1

@Bob Xplosion: 使用 css 的 inline-style 属性来实现你的要求有点像这样。

假设我有一个名称为 'alimento_featured_image' 的图像字段，那么我将这样做

while ( $the_query->have_posts() ) { $the_query->the_post();

        $nombre = get_the_title();
        $imagen_1 = get_field('imagen_principal_alimentos');
        ?>
        <div class="col-sm-4" <?php if($imagen_1 != "" and $imagen_1 != NULL){?>style="background:url(<?php echo $imagen_1;?>);"<?php }?>>
            <?php echo $nombre;?>
        </div>

        <?php
    } ?>

带有图像的 ACF post，与 html 和 css 一起使用

ACF post with an image, used with html and css

html

css

php

wordpress