AMP开发：如何在style属性中使用动态PHP值？

这个问题我之前碰到过，AMP严格禁止普通的内联style属性，但它允许在style里定义CSS自定义属性（CSS变量），这刚好能解决你动态背景图的需求。

具体做法很简单，分两步：

1. 在<style amp-custom>里定义基础样式，用CSS变量作为背景图的占位符：

<style amp-custom>
  .slide {
    /* 这里可以加其他固定样式，比如宽高、背景大小等 */
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    /* 用CSS变量作为背景图的来源 */
    background-image: var(--bg-image);
  }
</style>

2. 然后在你的PHP模板里，给每个.slide元素的style属性设置对应的CSS变量，把动态的图片URL传进去：

<div class="slide" style="--bg-image: url(<?php echo $img1; ?>);"></div>
<div class="slide" style="--bg-image: url(<?php echo $img2; ?>);"></div>

这样做完全符合AMP的规范，因为AMP允许内联style用于声明CSS自定义属性，而且每个元素的--bg-image变量值是动态生成的，完美满足你每个slide背景图不同的需求。

另外补充一下，如果你的背景图需要支持懒加载或者更复杂的响应式处理，也可以考虑用<amp-img>结合定位来模拟背景图，但对于简单的动态背景场景，上面的CSS变量方法是最直接高效的。

内容的提问来源于stack exchange，提问作者user1448031