高级自定义字段背景冲突

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> 

与类视差-BG1和带班英雄child1给你的一个。你的第二个实例将以2结束。

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