随机背景图片CSS | RAILS

Question

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

Answer 1

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

app/控制器/background_controller.rb

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

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

配置/routes.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用于将其放置在中间件链的顶部

---

或者在你的web服务器配置中有这样的东西更好。但我不知道如何或是否可以做到。

Answer 2

在您想要显示背景图像的视图文件中，添加以下行

<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

Answer 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.

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