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

最も簡単な方法は、ブラウザがリダイレクトに従うランダムな画像へのリダイレクトを使用してアクションを作成することです。

app / controller / background_controller.rb

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

background_0.jpgこれにより、との間の背景画像にランダムにリダイレクトされますbackground_9.jpg

config / routers.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;
}

より高度な方法は、ミドルウェアでこのようなことを行うことです。そのため、このような要求では、レール全体をスタックする必要はありません。

app / middleware / 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サーバーの構成でこのようなものを使用することをお勧めします。しかし、私はこれがどのように、またはできるかどうかはわかりません。

于 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 に答える