如何将.png显示为<h2>和<img> usig CSS的框架

Question

.s-assets {
  width: 100%;
  height: 60vh;
  &__block {
    height: 10vh;
    background-image: url("http://nas.gansa.pl/2019/puszczaknyszynska/wp-content/uploads/2019/10/Inteligentny_obiekt_wektorowy_kopia_12.png");
  }
  &__content {
    width: 500px;
    background-image: url('http://nas.gansa.pl/2019/puszczaknyszynska/wp-content/uploads/2019/10/Inteligentny_obiekt_wektorowy_kopia_12.png');
  }
}

<div class="col col-12 col-sm-6 col-lg-3 s-assets__block s-assets__block--first">
  <?php if (have_rows('sub_first_asset')) : ?>
  <?php while (have_rows('sub_first_asset')) : the_row();
												?>
  <div class="s-assets__content">
    <h3 class="s-assets__block-title">
      <?php echo get_sub_field('sub_sub_first_asset_title'); ?>
    </h3>
    <div class="s-assets__block-img">
      <img alt="" src="<?php echo get_sub_field('sub_sub_first_asset_img'); ?>" />
    </div>
  </div>
  <?php endwhile;
									endif; ?>
</div>

所以我必须创建这个：

我为h2和img（在这种情况下为床图片）制作了acf。然后我必须导出这两个框架（垂直和水平）并将它们放置为.png，但是我不能将它们放入html结构中，我必须使用css。 这行不通，我也不知道为什么...也许我对CSS的实际工作方式并不了解？ 请放心，这是我第一次做这样的事情。

Answer 1

请注意html中的区别，在您的html中只有一个类，而在CSS中则没有，您正在使用两个类 例如 .assets_title 而不是使用sass的CSS，您将得到以下信息： .assets.title {} 因此，在html中，必须在其中包含两个类

请修改以下测试代码：

.s-assets {
  width: 100%;
  height: 60vh;
  &.__block {
    height: 10vh;
    background-image: url("https://i.stack.imgur.com/xoRYM.png");
  }
  &.__content {
    width: 500px;
    background-image: url('https://i.stack.imgur.com/xoRYM.png');
  }
}
.__block {
    height: 10vh;
    background-image: url("https://i.stack.imgur.com/xoRYM.png");
}
.__content {
    width: 500px;
    background-image: url('https://i.stack.imgur.com/xoRYM.png');
  }

<div class="col col-12 col-sm-6 col-lg-3 s-assets__block s-assets__block--first">
  <?php if (have_rows('sub_first_asset')) : ?>
  <?php while (have_rows('sub_first_asset')) : the_row();
												?>
  <div class="s-assets __content">
    <h3 class="s-assets __block-title">
      <?php echo get_sub_field('sub_sub_first_asset_title'); ?>
    </h3>
    <div class="s-assets __block-img">
      <img alt="" src="<?php echo get_sub_field('sub_sub_first_asset_img'); ?>" />
    </div>
  </div>
  <?php endwhile;
									endif; ?>
</div>