Question

我不确定这是否可行。但我需要它。

我有一个css规则来定义style.css中的主页背景图片。我想从目录中随机选择一个图像。图像名称类似于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中做到这一点的方法是在div中添加一个类以及使用ID：

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

并在CSS中设置10个类：

.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

3 个答案: