Question

这是我的第一个话题，我会尽量保持精确。我对使用php很陌生，因此我目前的项目是一个很大的挑战。

我有2种产品，我希望能够通过ACF交换默认的BG图像和悬停图像。

ATM我可以交换悬停，但是它始终可见。如果我通过所见即所得编辑器添加图像，它将不会设置为bg图像，而是位于内容的顶部。

这是我拥有的：

代码如下：

    <?php
/**
 * Variables
 */

$introductiontitle = get_sub_field('introduction_title');
$introductionsubtitle = get_sub_field('introduction_subtitle');
$introductionsubtitle2 = get_sub_field('introduction_subtitle_2');
$hover_image1 = get_sub_field('hover_element_1_background');
$hover_image2 = get_sub_field('hover_element_2_background');

<!--  Introduction
-------------------------------------------------------------->
<div class="container-fluid pt-5 pb-8">
<div class="container">
    <div class="row">
        <div class="col-12 text-center mb-3">
            <h1 class="font-weight-bold mb-3">
                <?php echo $introductiontitle; ?>
            </h1>
            <p>
                <?php echo $introductionsubtitle; ?>
            </p>
            <p>
                <?php echo $introductionsubtitle2; ?>
            </p>
        </div>

        <div class="col-12 col-md-6">
            <div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
            <?php if ($hover_image1) { ?>
                    style="background-image: url(<?php echo $hover_image1 ?>"
                <?php } ?>
            >
                <?php the_sub_field('hover_element_1'); ?>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
                <?php if ($hover_image2) { ?>
                    style="background-image: url(<?php echo $hover_image2 ?>"
                <?php } ?>
            >
                <?php the_sub_field('hover_element_2'); ?>
            </div>
        </div>
    </div>
</div>

我希望这一切都说得通！！否则，请告诉我，我会做更好的解释。

预先感谢

Answer 1

我会发表评论以澄清问题，但还没有足够的要点，因此决定发布答案，因为这可能是您要实现的目标。

结合使用分层元素和不透明度，您应该能够实现背景图像变化的效果。

这是一个使用纯色的示例，但可以轻松将其更改为其他元素（例如，您的自定义背景图片和图片）： https://codepen.io/epsilon42/pen/NBNVad

HTML：

  <div class="product" style="background: #ccc;"><!-- change inline style to to ACF initial background-image -->
    <div class="hover-background" style="background: #666;"><!-- change inline style to to ACF hover background-image --></div>
    <div class="copy">
      <h2>test</h2>
      <p>lorem ipsum lorem ipsum</p>
      <div class="icon">
        <div class="initial-icon" style="background: #f00;"><!-- change this div to initial <img> --></div>
        <div class="hover-icon" style="background: #b4d455;"><!-- change this div to hover <img> --></div>
      </div>   
    </div>
  </div>

CSS：

.product {
  width: 300px;
  height: 300px;
  position: relative;
}
.product .hover-background,
.product .copy {
  width: 100%;
  height: 100%;
  position: absolute;
}
.product .hover-background {
  opacity: 0;
  transition: 0.2s all ease-in;
}
.product .copy {
  text-align: center;
}
.product .copy .icon {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}
.product .copy .icon .initial-icon,
.product .copy .icon .hover-icon {
  width: 100%;
  height: 100%;
  position: absolute;
}
.product .copy .icon .hover-icon {
  opacity: 0;
  transition: 0.2s all ease-in;
}
.product:hover .hover-background {
  opacity: 1;
}
.product:hover .copy .icon .hover-icon {
  opacity: 1;
}

您将需要调整CSS以适应您的情况。

通过ACF在悬停时添加和删除默认和悬停背景图像

1 个答案: