我已经做了相当多的搜索，但没有遇到任何最近的，有用的答案。我的问题是是否可以将HTML中的变量（可能使用数据属性）传递到CSS中？我的用例是，我有一些品牌页面，我想使用媒体查询来显示每个品牌的特定于供应商的背景。我知道你不能在内联CSS中使用媒体查询，但我同样不想在我的样式表中创建~100个媒体查询。在我的HTML页面上，我可以访问供应商背景URL的对象，所以如果我可以将这些传递到一个CSS媒体查询中，而不需要执行任何JavaScript，那就太好了。
qpgpyjmq1#
你可以用CSS变量（a.f.a.i.k.没有其他办法）。https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties它的工作原理是这样的：
<html style="--variable:'your_fallback_image.jpg'">
类似下面的东西：
@media screen and (width:64rem){ background-image: url(--variable); }
现在它应该在更改URL时相应地更新，并设置默认值，以防动态解决方案不起作用。希望能帮上忙。
j13ufse22#
你不传递HTMl到CSS。当Liquid将你的主题渲染成一个大的HTML字符串时，你可以使用产品的供应商来影响你向客户展示的CSS。要么你提前在CSS中设置你需要的特定垃圾，然后以这种方式切换，要么你从产品元字段中吸取垃圾并以这种方式使用它。换句话说，既然你可以将一个字符串保存为一个元字段，而CSS是一个字符串，你也可以这样做。
2条答案
按热度按时间qpgpyjmq1#
你可以用CSS变量（a.f.a.i.k.没有其他办法）。
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
它的工作原理是这样的：
<html style="--variable:'your_fallback_image.jpg'">类似下面的东西：
现在它应该在更改URL时相应地更新，并设置默认值，以防动态解决方案不起作用。希望能帮上忙。
j13ufse22#
你不传递HTMl到CSS。当Liquid将你的主题渲染成一个大的HTML字符串时，你可以使用产品的供应商来影响你向客户展示的CSS。要么你提前在CSS中设置你需要的特定垃圾，然后以这种方式切换，要么你从产品元字段中吸取垃圾并以这种方式使用它。换句话说，既然你可以将一个字符串保存为一个元字段，而CSS是一个字符串，你也可以这样做。