我们能在Google AMP中使用CSS背景图吗？

Question

我们能在Google AMP中使用CSS背景图片吗？

<pre>

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


</pre>

- Rakib Uzzaman

Answer 1

你可以这样做：

在标签中添加CSS代码。

在头部区域添加CSS

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

HTML

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

- Bachcha Singh

---

如何为动态循环内容显示背景图片。例如，显示帖子。 - Tamil Selvan C

可以实现。在循环中，您必须在头部区域为同一类别创建唯一的类和CSS。 - Bachcha Singh

我正在尝试使用这个方法，并且希望图像能够填满屏幕的宽度，然后根据宽高比16:9来计算高度，就像使用amp-image可以轻松实现的那样。我应该如何使div具有正确的尺寸？我应该使用amp-img，然后使用'position:absolute'将文本放在顶部吗？ - Jim S

Answer 2

AMP不支持内联样式（例如您的示例），但是您可以通过在标签中实现适当的样式，使用<style amp-custom>标签添加background-image。

在此处阅读更多信息：支持的CSS-AMP

- Jon Uleis

Answer 3

您还可以通过创建一个容器，使用position: relative将其包裹住amp-img和内容，并使内容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>

- mtngoat