web-dev-qa-db-ja.com

Google AMPのCSSバックグラウンドで画像を使用できますか？

Google AMPのCSSバックグラウンドで画像を使用できますか？

<pre>

    <div style="background-image: url(assets/img/business1.jpg);></div>


</pre>
htmlcssamp-html
7
Rakib Uzzaman

あなたはこのようにすることができます：

ヘッドセクションのCSS

<style amp-custom>
    .img-background { background-image: url(assets/img/business1.jpg); }
</style>

[〜＃〜] html [〜＃〜]

<pre>
<div class="img-background"></div>
</pre>
9
Bachcha Singh

AMPは（例のように）インラインスタイルをサポートしていませんが、background-imageの<style amp-custom>タグに適切な方法でスタイルを実装することで<head>を追加できます。

詳細はこちら： サポートされているCSS-AMP

1
Jon Uleis

また、amp-imgとコンテンツをラップするposition: relativeを使用してコンテナを作成し、コンテンツをposition: absoluteにして、次のようにamp-imgのサイズをカバーすることで、背景画像の動作を模倣することもできます。そう：

.wrapper {
  position: relative;
  width: '1200px';
  height: '700px';
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
<div class="wrapper">
  <amp-img
    src="https://www.variety.org.au/sa/wp-content/uploads/2016/06/placeholder.png"
    width="1200px"
    height="700px"
    layout="responsive"></amp-img>
  <div class="content">
    <h1>My Content </h1>
  </div>
</div>
0
mtngoat