使用Drupal 8是否可以将响应图像与CSS背景图像一起使用

Question

我知道在Drupal 8中可以使用响应式图像。因此，对于不同的屏幕尺寸，您将获得不同的图像（这对于性能很有趣，因为我不希望手机上的图像很大）。

但是现在我想知道您是否可以在Drupal 8中使用背景图像来做到这一点？因此，我希望能够在Drupal 8中上传响应图像（不同的屏幕尺寸=>不同的图像）但背景图像的图像。有人在那方面有经验吗？

谢谢！

Answer 1

我仍将使用响应式图像在CMS中对其进行配置，然后使用页面预处理挂钩将信息从响应式图像字段中取出并存储到页面中的JSON对象中。

然后，难题的最后一部分是编写我自己的JavaScript，该JavaScript检查onload和onresize事件并根据json对象中存储的信息设置背景图像。

Answer 2

您要在哪种情况下执行此操作？是内容类型还是自定义块？您会为此定制一个模板吗？

在这种情况下，假设您的实体上具有每种图像尺寸的字段，则可以将内联样式放入tpl twig文件中，并从数据库中获取图像的值。不是最漂亮的，但我认为您可以在尝试不使用js来从db实现任何CSS时跳过<style>标签实现。

Answer 3

现在有适用于Drupal 8的Responsive Background Image模块。它目前处于Alpha版本中，我尚未对其进行测试，但我计划根据自己的需求进行设置。