高級自定義字段背景衝突

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文件中，然後在循環中放入背景圖像樣式，因爲其餘樣式可能在所有元素和元素之間保持通用。