Question

我想设置一个随机生成的背景图片。

我正在使用Meteor并且正在调用Flickr API来提供我想要设置为背景图像的随机图像URL。

从我读过的内容来看，CSS现在似乎是建议设置背景图像的方法。有没有办法将动态生成的URL注入CSS？我似乎无法找到显示Handlebars.js和CSS混合的示例 - 这可能吗？或者我应该使用传统的HTML方式避免使用CSS并设置背景图像？

我一直在尝试两种不同的策略：

1）使用通过把手注入的url在HTML中创建CSS属性 - 但我似乎无法将CSS属性与Handlebars连接。

2）我尝试的另一种方法是将CSS属性创建为模板代码中的变量，并通过Handlebars将其返回到HTML中，如下所示：

Template.backgroundImage.background = function(){
//runs function to generate url and add to Session object   
    FlickrRandomPhotoFromSet(setID);
//create variable with html and css attribute concatenated to url
var backgroundImage = '<div style="background-image: url('+Session.get("RandomURL")+')"></div>';
//return resultant variable to HTML via template
    return backgroundImage;
};

然后在HTML中我插入了以下内容：

<template name="backgroundImage">
    {{background}}
</template>

Answer 1

这种方法最终为我工作：

我正在使用我定义为模板的内部样式表。更新网址以匹配随机生成的网址：

<template name="backgroundImage">
  <style>
  body {
  background-image:url({{background}});
  background-repeat: no-repeat;
  background-position: right top;
  }
  </style>

Answer 2

Meteor有一个为流星打造的包，名为random，您可以添加

meteor add random

如果它已经包含在您的项目中。

Random.choice()方法可以帮助您，例如，如果您有一系列网址

var myurls = ["http://www.url.com/1","http://www.url.com/2","http://www.url.com/3"];
var the_random_url = Random.choice(myurls);

然后你提到用css＆amp;改变'身体' {{background}}

的车把帮手

<style>
    body {
        background-image:url({{background}});
        background-repeat: no-repeat;
        background-position: right top;
    }
</style>

或者用jquery编辑它：

$('body').css({
    background-image:"url("+the_random_url+")",
    background-repeat: "no-repeat"
    background-position: "right top"
});

Answer 3

sugarjs提供了sample（）方法

http://sugarjs.com/api/Array/sample

或者您可以查看来源以编写自己的。

https://github.com/andrewplummer/Sugar/blob/master/lib/array.js#L906

从数组中返回一个随机元素。如果传递num，将返回数组中的num samples。

我在meteor.js项目中使用它。使用该API在模板渲染后获得随机元素。

混合handlebars.js和CSS - 随机背景图像？

3 个答案: