Css 带有背景图像和文本的可单击区域

我是一名前端新手，正在尝试找出如何在rails应用程序中构建以下内容：

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

目前，我已通过Gemfile中的以下gem将引导部署到我的应用程序上：

gem 'bootstrap-sass', '2.3.2.0'

我正在使用carrierwave存储图像，它们可以通过以下方式在视图中访问：

<%= image_tag @company.image_url %>

---

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

您只需将图像放置在锚定中，如下所示：

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

---

基本上，

link\u to

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

我相信你所需要做的就是将所有图像制作成html div

让我们假设image 1st是带有标记的内部html元素，背景图像是您的图像

您还可以在该div上放置/设置特定的徽章，还可以使用css在任何鼠标事件上使该图像变暗

如果我遗漏了什么或者你有什么问题。请让我知道

---

谢谢。

但是我如何将文字放在上面，使图像变暗，以及添加徽章？