隨機背景圖片CSS | RAILS

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隨機背景圖片CSS | RAILS

來源

2013-01-18 MFCS

[你有什麼試過]（http://whathaveyoutried.com/）？ –

我到目前爲止嘗試過：random_bg = ['bg1.png'，'bg2.png'，'bg3.png']。sample。不幸的是，這些圖片並沒有顯示出來:( – MFCS

在視圖文件，你想顯示背景圖像，加入這一行

<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-18 18:20:27

這很好用！上面的回答用戶發佈了路由等有一些優勢嗎？ – MFCS

上面的答案如果你真的想把css從視圖文件中分離出來，可能會更好一些。 –

不能用style.css.scss來完成 – MFCS

最簡單的方法是創建一個重定向到隨機圖像的操作，瀏覽器將遵循重定向。

應用程序/控制器/ 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; 
}

一些更高級的做法是在中間件中這樣做，所以這樣的請求不需要整個軌道堆棧。

應用/中間件/ 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-18 18:10:53 jigfox

雖然它看起來不是隨機的，你能簡單地解釋一下嗎？ – MFCS

@MFCS我更新了我的答案以更好地解釋它 – jigfox

對於最近資產管道工作的方式rails版本，你應該使用「/ assets/background _＃{rand（10）}。jpg「而不是」/assets/images/background_#{rand(10)}.jpg「 – TopperH

我通過創建一個隨機這樣做班級名稱如下：

<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-02 00:32:40

不錯:)我不知道這是否會導致性能問題/帶寬浪費，儘管如果所有的圖像每次都被加載？ – Laser

隨機背景圖片CSS | RAILS

回答

相關問題