基于屏幕大小的多个动态背景图像网址

Question

我想根据屏幕大小使用两种不同的background-image：url（）值。这是相当简单的做，如果网址是提前知道的：

@media (max-width: 400px) { 
.element { 
    background-image:url("/Images/1.png"); 
} 
} 

@media (min-width: 401px) { 
.element { 
    background-image:url("/Images/2.png"); 
} 
} 

不过，我不知道提前我的图片网址 - 它们是基于从用户信息。在代码中动态URL（）的后面，像这样：我可以设置一个背景图像

string backgroundStyle = "background-image: url(\""+loginImagePath+"\"); "; 
sBodyWrapper.Attributes.Add("style", backgroundStyle); 

但我不知道我怎么会去设定两个不同的背景图片其或者显示了基于屏幕宽度。我可以在不同的元素上设置两个背景图像并隐藏其中一个元素，但我真的希望将这个背景图像放在单个主体包装元素上。
有什么方法可以在媒体查询中设置值吗？可以将条件CSS应用于元素的样式属性？

Answer 1

你可以通过附加到文档的样式标记添加条件CSS：

var rules = '<style> 
@media(max-width: 400px){ 
    background-image:url("Images/1.png"); 
} 
@media(min-width: 401px){ 
    background-image:url("Images/2.png"); 
} 
</style>';