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

Question

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

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

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

gem 'bootstrap-sass', '2.3.2.0'

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

<%= image_tag @company.image_url %>

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

score 0 · Accepted Answer

您只需要将图像放置在这样的锚中：

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

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

score 0 · Accepted Answer

我相信你只需要制作所有图像 html div。

假设图像 1st 带有标签作为内部 html 元素，背景图像带有您的图像。

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

如果我遗漏了什么或者你有任何问题。请告诉我..

谢谢。

2 回答 2