web-dev-qa-db-ja.com

絵の要素を背景画像として使用するにはどうすればよいですか？

シンプルな画像フィールドを使用すると、画像のスタイルを設定し、それを使用して画像をdivタグの背景として設定できます（以下の例を参照）。ただし、Drupal 8には Responsive Image モジュールがあるため、画像フィールドは以下のように生成されます。異なるブレークポイントを使用すると、異なる画像がブラウザーによってフェッチされますが、これにより、画像を背景として設定するのは難しい。

現在の実装は柔軟です。テキストが大きくなると、背景画像として画像を含むdivの高さが大きくなるためです。

画像タグをどのように使用して画像を背景として設定しますか？ Drupalブラウザで取得されている画像を検出する方法が見つかりませんでした。

ゴール：

  1. 背景として画像を使用
  2. 画像の上にテキストをオーバーレイ
  3. オーバーレイテキストが大きくなると、テキストを含むdivも大きくなります。そのため、背景としての画像も大きくなるはずです。

レスポンシブイメージなしの現在の実装：

<div class="wrapper">
    <div class="wrapper_img" style="background-image: url('/sites/default/files/banner_large/name.jpg')"></div>
    <div class="wrapper_content">Authoritatively reinvent magnetic ROI without excellent interfaces. Professionally drive extensive manufactured products through 24/365 leadership. </div>
</div>

背景画像の設定を困難にするレスポンシブ画像出力（banner_large、banner_medium、banner_smallは画像スタイルです）

<picture>
<source srcset="/sites/default/files/banner_large/name.jpg 1x" media="all and (min-width:1200px) type="image/png" >
<source srcset="/sites/default/files/banner_medium/name.jpg 1x" media="all and (min-width:768px) type="image/png" >
<source srcset="/sites/default/files/banner_small/name.jpg 1x" media="all and (min-width:320px) type="image/png" >

<img src="/sites/default/files/banner_small/name.jpg" alt="text" typeof="foaf:Image">

</picture>
8mediatheming
2
usernameabc

responsive-image.html.twig を変更して、必要なことを実行できることがわかりました。次のリンクを組み合わせて使用​​しました。

  1. レスポンシブ画像
  2. レスポンシブ画像（MDN Webドキュメント）
0
usernameabc