html - 带有属性的随机图像 css

Question

我想通过 css 在后台的 ruby​​ on rails 中做一个随机图像。不同之处在于我还想显示对拍摄图像的人的归属。我只会有 5 张图片，所以不需要数据库。我想保持低维护。扩展以下内容的最佳方法是什么？

<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 1

好吧，首先是免责声明，我认为您不应该这样做。在 CSS 中嵌入 Ruby 非常草率。为什么？它跨越了抽象层并不必要地混合了关注点。

Ruby(和一般的 erb 模板)确实没有很好的文档对象模型，但猜猜谁有？查询! :) 因此，作为替代方案，请查看此问题答案中的 $ 示例:Random background images CSS3

就是说，要在 Ruby 中执行此操作，方法是为每个图像创建一个哈希对象，然后将它们放入数组中，即:

image_hash = Hash[url: 'http://', attribution: 'Author K. Dude']
=> {:url=>"http://", :attribution=>"Author K. Dude"}
image_hash[:url]
=> "http://"
array_of_image_hashes = Array[image_hash]
=> [{:url=>"http://", :attribution=>"Author K. Dude"}]
array_of_image_hashes.first[:url]
=> "http://"

通过这种方式，您可以在 View 中在样式级别共享相同的局部变量(数组的随机索引)，就像它下面的跨度中的字符串一样。因此，<%= random_image_result[:url] %> 是样式，<%= random_image_result[:author] %> 是跨度。我猜您正在使用 Rails，如果是这样，我建议将您的生成器方法放在一个帮助器中，该帮助器会自动包含在 Controller 级别，以便您可以在 View 中使用。