如何将上下文值传递给css答案

【问题标题】：how to pass context value to css如何将上下文值传递给css
【发布时间】：2015-06-29 15:56:02
【问题描述】：

我必须为我的网页添加背景图片，所以我在下面的代码 css 中添加了正文

body {
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 400;
    color: #666;
    font-size: 12px !important;
    line-height: 20px;
    background-image: url(../resources/img/background_img.jpg);
}

但我必须将背景图像添加为

url(${context}/resources/img/background_img.jpg);

，其中上下文将从 jsp 传递（而不是绝对路径）。 put conext param 不起作用，有没有其他方法或者我做错了。需要帮助

【问题讨论】：

你可以设置使用javascript或jquery

标签： html css jsp

【解决方案1】：

你不能改变你的CSS（除非他们是dynamically generated）。您可以在每个 jsps 中嵌入一个 <style> 标记，并使用具有 higher precedence 的 css 代码，以便您可以更改样式，例如：

<head>
.....
<style>
body {
  background-image: url(${context}) !important;
}
</style>
.....
</head>

或者你可以使用一些 javascript/jquery 代码来做到这一点：

$( document ).ready(function() {
    $('body').css('background-image',$('#bgImage').val());
});

#bgImage 可以是您的 jsp 中生成的隐藏字段，例如：

<input type="hidden" id="bgImage" value="${context}"/>

还有其他方法可以做到这一点，我只是概述了两种......

希望对你有帮助

【讨论】：

这看起来很不错，这也可以外化并用于其他页面。

【解决方案2】：

不，你不能用 CSS 做到这一点。首选方法是根据上下文向正文添加一个类，然后有一个匹配的类来定义该上下文的样式。例如，在您的 html 中

<body class="context-1"></body>

在你的 CSS 中：

body.context-1 {
  background-image: url(/path/to/context-1/image);
}

或者，您可以简单地内联背景图像。

<body style="background-image: url(/path/to/${context})"></body>

【讨论】：

但我有很多页面使用相同的背景图片，因此我希望它在 css 中，而不是内联
@pappu_kutty 我的第一个示例使用 CSS。