Google AMPのCSSバックグラウンドで画像を使用できますか?
<pre>
<div style="background-image: url(assets/img/business1.jpg);></div>
</pre>
あなたはこのようにすることができます:
ヘッドセクションのCSS
<style amp-custom>
.img-background { background-image: url(assets/img/business1.jpg); }
</style>
[〜#〜] html [〜#〜]
<pre>
<div class="img-background"></div>
</pre>
AMPは(例のように)インラインスタイルをサポートしていませんが、background-image
の<style amp-custom>
タグに適切な方法でスタイルを実装することで<head>
を追加できます。
詳細はこちら: サポートされているCSS-AMP
また、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>