将值从 ASP.NET 控制器传递到 CSS

Question

我不确定我的方式是否可行。但我需要它。

我有一个 css 规则来定义 style.css 中的主页背景图像。我想从目录中随机 select 一张图片。图像名称类似于 main-bg-*.jpg（即 main-bg-1.jpg、main-bg-2.jpg）。

CSS

#background-div {
padding: 0;
margin: 0;
color: #000;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
background-image: url('../Images/Backgrounds/home-page-bg-1.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

HTML

<body>
   <div id="background-div"></div>
   -------
   -------
</body>

我想在控制器方法中生成一个 1 到 10 之间的数字，然后将其传递给 css 规则。

我该怎么做？

如果有其他方便的方法，请告诉我。

抱歉，如果这是一个愚蠢的问题。

谢谢。

Answer 1

也许你可以像下面这样从 JS 设置背景图片。

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(your image url)';

Answer 2

JS:

var img = 'main-bg-'+ Math.floor((Math.random() * 10) + 1)+'.jpg';
 document.getElementById('elementid').style.backgroundImage = url(img);

Answer 3

您可以在 C# 和 CSS 中执行此操作的一种方法是将 class 添加到 div 以及使用 ID：

<body>
   <div id="background-div" class="background1"></div>
   -------
   -------
</body>

并在 CSS 中设置 10 个 classes:

.background1 { background-image: url('../Images/Backgrounds/home-page-bg-1.jpg'); } 

...

.background10 { background-image: url('../Images/Backgrounds/home-page-bg-10.jpg'); }

我知道你已经选择了一个答案，只是建议作为一种方式来做你所要求的，而不需要 javascript

将值从 ASP.NET 控制器传递到 CSS

Pass a value from ASP.NET controller to CSS

css

asp.net-mvc