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用于将其置于中间件链的顶部

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

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.

不确定这是否是最佳方式，但这很简单。

随机背景图片CSS |钢轨

3 个答案: