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

【问题标题】：Can we use images in CSS background in Google AMP?我们可以在 Google AMP 中使用 CSS 背景中的图像吗？
【发布时间】：2017-08-18 16:04:29
【问题描述】：

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

<pre>

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


</pre>

【问题讨论】：

标签： html css amp-html

【解决方案1】：

你可以这样做：

头部的 CSS

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

HTML

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

【讨论】：

如何显示动态循环内容的背景图片。例如显示帖子
可以，可以实现。在循环中，您必须在同一类的头部创建唯一的类和 css
我正在尝试使用此方法，我希望图像填充屏幕的宽度，然后计算高度，因此纵横比为 16 x 9，可以使用放大器图像。如何获得正确大小的 div？我应该使用 amp-img，然后使用 'position:absolute' 将我的文本放在顶部吗？

【解决方案2】：

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

在此处阅读更多信息：Supported CSS - AMP

【讨论】：

【解决方案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>

【讨论】：