CSS背景图片使用属性值

Question

我遇到这样的情况，设计状态是将两个不同的图像用作背景图像（一个用于桌面，另一个用于移动设备）。 这些图像是通过CMS上传的，因此我可以使用PHP检索一个和另一个图像的URL。

有没有一种方法可以将这些URL作为属性传递，或通过其他任何方式传递给CSS使用？

我需要一些基于高度和宽度的媒体查询，因此使用javascript / jquery会很麻烦。

我尝试了这个：

  background-image: attr(data-desktop url);

其中，data-desktop是element的属性，包含所需的url，但是此代码没有运气。

任何建议或链接将是一个很大的帮助。

Answer 1

我认为它将与

background-image: url(attr(data-desktop));

如果您的元素具有数据桌面属性，其中包含背景图片的网址：）

Answer 2

您需要在伪选择器之前/之后使用（正确放置的）位置。

首先，请确保将它们放在这样的属性中：

<body data-portrait="<?php echo $portrait;?>" data-landscape="<?php echo $landscape; ?>">

然后在它们各自的查询中使用正确放置的伪元素之前/之后检索它们，例如

body:before {content: attr(data-desktop); //etc}