Question

我们可以在Google AMP的CSS背景中使用图片吗？

<pre>

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


</pre>

Answer 1

你可以这样做：

头部的CSS

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

<强> HTML

<pre>
<div class="img-background"></div>
</pre>

Answer 2

AMP不支持内联样式（例如您的示例），但您可以通过在background-image的{{1}}标记中以正确的方式实现样式来添加<style amp-custom>。

在此处阅读更多内容：Supported CSS - AMP

Answer 3

您还可以通过使用position: relative创建一个容器来模拟背景图像的行为，该容器包装了amp-img和内容，并制作了内容position: absolute，并使其覆盖了放大器的尺寸。 -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>

我们可以在Google AMP的CSS背景中使用图片吗？

3 个答案: