0
我使用高級自定義字段來構建可重用模塊並使用靈活的內容來構建視差模塊。高級自定義字段背景衝突
模塊模板
<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,但希望有一個更簡單的解決方案?