css - 背景画像とテキストを含むクリック可能な領域

Question

私はフロントエンドの初心者で、Rails アプリで次のものを構築する方法を理解しようとしています。

各画像は、タイトル、サブタイトル、画像、取引数の属性を持つ企業モデルです。個別の各画像の領域全体をクリック可能にして、「表示」アクションにリンクしたい。また、テキストを読みやすくするために、画像を暗くする必要があります。私の質問は、個々の画像ボタンを作成する方法です。

現在、Gemfile の次の gem を介してアプリにブートストラップをデプロイしています。

gem 'bootstrap-sass', '2.3.2.0'

私は Carrierwave を使用して画像を保存しており、次の方法でビューにアクセスできます。

<%= image_tag @company.image_url %>

これは長い答えになるようですが、どこから始めればよいのか本当にわかりません。

score 0 · Accepted Answer

すべての画像をhtml divにするために必要なものはすべてあると思います。

画像 1 番目は、画像の背景画像を持つ内側の html 要素としてタグが付いているとしましょう。

また、特定のバッジをその div に配置/設定することも、css を使用して任意のマウスイベントでその画像を暗くすることもできます。

私が何か不足している場合、または質問がある場合. 私にお知らせください..

ありがとう。

score 0 · Accepted Answer

次のように、イメージをアンカー内に配置するだけです。

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

基本的にlink_to、リンクを作成します。最初の引数はユーザーに表示される「クリック可能な」コンテンツで、2 番目の引数は実際のリンク自体です。

2 に答える 2