3 
html{ 
    background: url(/assets/flower.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;   
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

如何使此代码从选定数量的图片中随机选择作为背景。我正在使用 Rails 3，所以请记住这一点，如果这会简化这项工作的过程。谢谢！:D

4

3 回答 3

8

最简单的方法是创建一个重定向到随机图像的操作，浏览器将遵循重定向。

应用程序/控制器/background_controller.rb

class BackgroundController < ApplicationController
  def image
    redirect_to "/assets/images/background_#{rand(10)}.jpg"
  end
end

这将随机重定向到 和 之间的背景background_0.jpg图像background_9.jpg

配置/路由.rb

Something::Application.routes.draw do
  …
  get '/random_background.jpg', to: 'background#image'
  …
end

css

html{ 
  background: url(/random_background.jpg) no-repeat center center fixed;
}

一些更高级的方法是在中间件中执行类似的操作，因此这样的请求不需要如此完整的 rails 堆栈。

应用程序/中间件/random_background_middleware.rb

class RandomBackgroundMiddleware
  def initialize(app, count = 10)
    @app = app
    @count = count
  end

  def call(env)
    if env["PATH_INFO"] == "/random_background.jpg"
      [302, {"Location" => "/assets/images/background_#{rand(@count)}.jpg")}, '']
    else
      @app.call(env)
    end
  end
end

config/application.rb

config.middleware.insert_before 0, "RandomBackgroundMiddlware"

insert_before 0用于将其放置在 Middleware-Chain 的顶部

或者更好的是在你的网络服务器配置中是这样的。但我不知道如何或是否可以做到这一点。

于 2013-01-18T18:10:53.527 回答
7

在要显示背景图像的视图文件中，添加此行

<style type="text/css">
  html {
    background: url(<%= randomized_background_image %>) no-repeat center center fixed; 
  }
</style>

现在在你的 application_helper

def randomized_background_image
  images = ["assets/foo.jpg", "assets/random.jpg", "assets/super_random"]
  images[rand(images.size)]
end
于 2013-01-18T18:20:27.877 回答
3

我通过在视图中创建一个随机类名来做到这一点，如下所示：

<div class="homepage-banner-<%= rand(1..10) %>">

然后我像这样在我的css中添加了多个图像：

.homepage-banner-1
  background-image: image-url('homepage/homepage-feature-1.jpg')

.homepage-banner-2
  background-image: image-url('homepage/homepage-feature-2.jpg')

.homepage-banner-3
  background-image: image-url('homepage/homepage-feature-3.jpg')

etc.

不确定这是否是最好的方法，但它非常简单。

于 2015-02-02T00:32:40.397 回答