随机背景图片CSS | 钢轨

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

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

应用程序/控制器/ 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 用于将其置于中间件链的顶部

或者更好的是在你的webserver配置中这样的东西.但我不知道如何或如果这样做.

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