Question

我正在使用高级自定义字段来构建可重复使用的模块，并使用灵活的内容来构建视差模块。

模块模板

<style>
    .parallax-bg {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .hero-child {
        position: absolute;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        height:100%;
        background-image:url("<?php the_sub_field('parallax_image_sm'); ?>");

    }

    @media only screen and (min-width: 768px) {
        .parallax-bg {
            background-size: cover;
            background-position: top center;
            background-repeat: no-repeat;
            position: relative;
         }
         .hero-child {
             background-image:url("<?php the_sub_field('parallax_image_lrg'); ?>");
         }
    }


</style>



<section class="parallax-bg <?php the_sub_field('add_class'); ?>" style="overflow:hidden;"> 
    <div class="hero-child" data-bottom-top="background-position:50% 100px;" data-top-bottom="background-position:50% -100px;"></div>
    <div class="row">
            <div class="parallax-content">
            <?php the_sub_field('parallax_content'); ?>
        </div><!!--end parallax content -->
    </div>
</section>

当我在页面上使用相同的模块时，相同的背景图像显示在相同的部分。我试图找到解决这个问题的方法。我在考虑使用GUID，但希望有一个更简单的解决方案？

Answer 1

我假设所提供的代码重复多次，因此最终的内容集将显示所有内容，因为每个标记使用相同的类名，因此页面上的最后一个将覆盖所有其他样式。

您需要实现某种计数器，以便为每个计数器提供自己独特的样式。也许是这样的：

在你的循环/转发器之前，添加：

<?php $i = 0; ?>

然后，就像您的循环/转发器启动一样，添加：

<?php $i++; ?>

然后，对您的代码进行以下更改：

<style>
.parallax-bg<?php echo $i; ?> {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-child<?php echo $i; ?> {
    position: absolute;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    height:100%;
    background-image:url("<?php the_sub_field('parallax_image_sm'); ?>");

}

@media only screen and (min-width: 768px) {
    .parallax-bg<?php echo $i; ?> {
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        position: relative;
     }
     .hero-child<?php echo $i; ?> {
         background-image:url("<?php the_sub_field('parallax_image_lrg'); ?>");
     }
}


</style>
<section class="parallax-bg<?php echo $i; ?> <?php the_sub_field('add_class'); ?>" style="overflow:hidden;"> 
<div class="hero-child<?php echo $i; ?>" data-bottom-top="background-position:50% 100px;" data-top-bottom="background-position:50% -100px;"></div>
<div class="row">
        <div class="parallax-content">
        <?php the_sub_field('parallax_content'); ?>
    </div><!!--end parallax content -->
</div>

因此，这将为你的循环的第一个实例输出你的html：

<style>
.parallax-bg1 {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-child1 {
    position: absolute;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    height:100%;
    background-image:url("<?php the_sub_field('parallax_image_sm'); ?>");

}

@media only screen and (min-width: 768px) {
    .parallax-bg1 {
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        position: relative;
     }
     .hero-child1 {
         background-image:url("<?php the_sub_field('parallax_image_lrg'); ?>");
     }
}


</style>
<section class="parallax-bg1 <?php the_sub_field('add_class'); ?>" style="overflow:hidden;"> 
<div class="hero-child1" data-bottom-top="background-position:50% 100px;" data-top-bottom="background-position:50% -100px;"></div>
<div class="row">
        <div class="parallax-content">
        <?php the_sub_field('parallax_content'); ?>
    </div><!!--end parallax content -->
</div>

使用 parallax-bg1 课程和课程 hero-child1 授课。你的第二个实例将以2结尾。

我建议将所有常见样式放在CSS文件中，然后在循环中放置背景图像样式，因为其余样式可能在所有和元素之间保持通用。 / p>

高级自定义字段背景冲突

1 个答案: