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");
}
}

但是，我不提前知道我的图片网址 - 它们是基于用户提供的信息。我可以在后面的代码中动态设置一个background-image：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>';

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

1 个答案: