1

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

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

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

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

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

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>
4

3 回答 3

8

这种方法最终对我有用：

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

<template name="backgroundImage">
  <style>
  body {
  background-image:url({{background}});
  background-repeat: no-repeat;
  background-position: right top;
  }
  </style>
于 2013-05-20T02:21:04.750 回答
1

Meteor 有一个为流星构建的包，random你可以添加

meteor add random

如果它尚未包含在您的项目中。

该Random.choice()方法可以帮助您，例如，如果您有一组 URL

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 和车把助手改变“身体”{{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"
});
于 2013-05-20T09:45:31.440 回答
-1

Sugarjs 提供了一个 sample() 方法

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

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

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

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

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

于 2013-05-20T08:24:15.227 回答