Как отобразить .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>

Итак, я должен создать это:

Я сделал ACF для h2 и img (изображениекровати, в данном случае). Затем я должен был экспортировать эти два кадра (вертикальный и горизонтальный) и поместить их как .png, но я не могу поместить их в структуру HTML, я должен использовать CSS. Это не работает, и я понятия не имею, почему ... может быть, я кое-что не понимаю о том, как на самом деле работает CSS? Пожалуйста, будьте осторожны, я впервые делаю такие вещи.

Answer 1

обратите внимание на разницу в html, в вашем html был только один класс, и не в вашем css вы использовали два примера .assets_title , а не в css с sass вы получили это: .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>