css - 带有背景图像和文本的可点击区域

Question

我是一名前端新手，正在尝试弄清楚如何在我的 Rails 应用程序中构建以下内容:

https://dl.dropboxusercontent.com/u/10334022/browse.png

每张图片都是一个公司模型，具有标题、副标题、图片和交易数量属性。我希望每个单独图像的整个区域都可以点击并链接到“显示”操作。我还需要将图像 a 变暗以使文本更具可读性。我的问题是如何制作每个单独的图片按钮。

目前，我通过我的 Gemfile 中的以下 gem 在我的应用程序上部署了 Bootstrap :

gem 'bootstrap-sass', '2.3.2.0'

我正在使用 carrierwave 来存储图像，并且可以通过以下方式在 View 中访问它们:

<%= image_tag @company.image_url %>

这似乎是一个很长的答案，但我真的不知道从哪里开始。

Answer 1

您只需要像这样将图像放在 anchor 内:

<%= link_to(image_tag @company.image_url, company_path(@company)) %>

基本上，link_to 创建一个链接，其中第一个参数是向用户显示的“可点击”内容，第二个参数是实际链接本身。