Chrome ブラウザの新しいタブの効果を実現する方法 page_html/css_WEB-ITnose

CSS Chrome

Chrome ブラウザの新しいタブ ページと同様の効果を作成したいです

3 つの問題が発生しました。ガイドしていただければ幸いです

1. ハイパーリンク
上部は画像、下部はテキストです
あなた写真またはテキストをクリックすると、指定したページにジャンプします

ただし、 タグの下では

タグは使用できないことがわかります
この効果が作成される場合は、次のようにする必要があります





• 
  
• 
  
  
  
  2. 画像適応ウィンドウのサイズ
  インターネット上で画像適応ウィンドウの例をたくさん見てきました
  ただし、Chrome ではまだこの効果をシミュレートできません
  
  3. ハイパーリンク画像をクリックすると、濃い灰色の背景
  CSS でこの効果を作成する方法
  
  ディスカッション (解決策) への返信
  1. そのとおりです

  2. 本体サイズをパーセンテージとして設定し、画像サイズをパーセンテージとして設定します。つまり、どちらの画像も上位レベルのタグにもパーセンテージのサイズはありません。 以上です
  3. 半透明のレイヤーを使用してカバーすると、灰色の効果はありません
  

  1. そのままです

  2. 本体のサイズをパーセンテージに設定し、画像を設定しますサイズをパーセンテージに変更します。つまり、img もその上位レベルのタグもパーセンテージではありません。サイズは十分です
  3. 半透明のレイヤーを使用してカバーすると、グレー効果は発生しません
  
  引き続きアドバイスを求めてください
  
  質問 2 について。私もサイズの設定にパーセンテージを使用しています
  しかし、Chrome ブラウザーが最大化されたウィンドウと通常のウィンドウで画像の長さのパーセンテージが一致しないことがわかりました
  これはどのように実現されますか?
  
  質問3について、よくわかりませんが詳しく教えてください
  1. その通りです

  2. bodyサイズはパーセントに設定されており、imgサイズはパーセントに設定されているということです。 img とその上位タグにはサイズのパーセンテージがないということです

  3. グレー効果を避けるために、半透明のレイヤーを使用してカバーします
  
  3 作成しました
  不透明度を使用して透明度を設定します
  
  2 まだ疑問があります
  
  

  1. その通りです

  2. ボディサイズをパーセンテージとして設定し、img サイズをパーセンテージとして設定します。これは、img とその上位レベルのタグの両方がパーセンテージサイズではないことを意味します。 3. 半透明レイヤーを使用して、カバーすると灰色の効果が得られます
  
  3 できました
  不透明度を使用します 透明度を設定します
  
  2 まだ疑問があります
  
  メタを使用して、異なる幅で呼び出される CSS ファイルを変更します
  
  
  1. そのままです

  2 . 本体のサイズをパーセンテージで、imgのサイズをパーセンテージで設定します。つまり、imgとその上位タグです。パーセンテージのサイズを調整するだけで大​​丈夫です

  3. 半透明のレイヤーで覆うと、グレーの効果が得られます
  
  3 できました
  不透明度を使用して透明度を設定します
  
  2 まだ疑問があります
  うまくいかない場合は、ウィンドウのリサイズイベントを使用してください。 js はページのサイズを取得し、幅と幅を設定します画像の高さを取得するjsのコードはBaiduで検索すると見つかります
  
  
  1. そのままです

  2. 本体サイズをパーセンテージで設定し、画像サイズを設定しますこれは、img とその上位レベルのタグがパーセンテージ サイズではないことを意味します

  3. 半透明のレイヤーを使用してそれをカバーすると、灰色の効果が得られます
  
  3 私が作りました
  不透明度を使用して透明度を設定します
  
  2 まだ疑問がある場合は
  本当に機能しない場合は、js を使用してウィンドウのサイズ変更イベントでページのサイズを取得し、img の幅と高さを設定するだけです。複雑ではありません。 Baidu で js のコードを検索してページ サイズを取得できます
  わかりました
  別途オンラインで確認しましたが、js を使用して画面サイズを取得し、未使用の CSS を呼び出すこともできます
  問題は解決しました、ありがとう