css - Shopify 液体模板中带有文本叠加的图像

Question

Shopify 的新手。我正在为我的商店编写 Express 主题的代码，不知道如何将 h1 标题作为图像叠加层。这是我需要在液体模板中编辑的部分的代码：

section class="collection__section" data-section-id="{{ section.id }}">
  <div class="collection-wrapper">
    <h1 class="collection__title center">{{ collection.title }}</h1>
    <div class="collection-info collection-info--template">
      {%- if section.settings.show_collection_image and collection.image -%}
      <div class="collection-image-wrapper">
          <div class="collection-image-container">
            <img srcset="{% if collection.image.width >= 311 %}{{ collection.image | img_url: '311x' }} 311w,{% endif %}
                {% if collection.image.width >= 622 %}{{ collection.image | img_url: '622x' }} 622w,{% endif %}
                {% if collection.image.width >= 685 %}{{ collection.image | img_url: '685x' }} 685w,{% endif %}
                {% if collection.image.width >= 1370 %}{{ collection.image | img_url: '1370x' }} 1370w,{% endif %}
                {% if collection.image.width >= 1080 %}{{ collection.image | img_url: '1080x' }} 1080w,{% endif %}
                {% if collection.image.width >= 2160 %}{{ collection.image | img_url: '2160x' }} 2160w{% endif %}"
              sizes="(min-width: 1200px) 1080px, (min-width: 750px) calc(100vw - 8rem), calc(100vw - 6.4rem)"
              src="{{ collection.image | img_url: '1080x' }}"
              width="{{ collection.image.width }}"
              height="{{ collection.image.height }}"
              loading="lazy"
              class="media-cover"
              alt="{{ collection.title }}">
          </div>
        </div>
      {%- endif -%}

如何让收藏标题出现在图片的中心？谢谢

标签： cssshopifyliquidshopify-template