小编Cha*_*ane的帖子

我期待CSS动画背景从大小background-size: cover;到background-size: 120%悬停.我不能让背景以100%开始,因为它开始在不同的设备/监视器上垂直重复.但是,transition:.5s;在这种情况下,停止任何类型的动画.有什么解决方法吗？

代码如下所示:

HTML

<div class="desktop-signs">
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-illustration">
      <h2>ILLUSTRATION &amp; ANIMATION</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-website">
      <h2>WEBSITE DEVELOPMENT</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-game">
      <h2>GAME &amp; APP DEVELOPMENT</h2>
    </div>
  </div>
</div>

CSS

.__hero-container #services .block-service {
  height: 800px;
  background-image: url('../images/blockillustration.jpg');
  background-size: cover;
  text-align: center;
  color: #fff;
  background-position: center;
  opacity: 1;

  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.__hero-container #services .block-service:hover {
  background-size: 110%;
  opacity: 0.8; …

我为 WooCommerce 类别创建了自定义字段。位置如下所示，它们工作正常。

但是，当我转到我的archive.php文件并尝试 a时the_field('category_banner)，它没有检索到任何数据。这是我如何布局的示例。

<?php
$categorybanner      = get_field('category_banner');
$categorydescription = get_field('category_description');
?>

<div class="container-fluid" id="ivy-banner" style="background: url('<?php echo $categorybanner ?>') center / cover"></div>
<h4 class="text-black"><?php echo $categorydescription; ?></h4>

这段代码不起作用的原因是什么？我只能假设它与位置有关，而不是代码本身。我怎样才能规避这个问题？