8

壊れた/エラーのある画像に追加のCSSを提供したいと思います:

img:error {
  max-width: 20px;
  max-height: 20px;
}

しかし、それはうまくいきません。純粋なCSSでこれを行う方法はありますか? imgこのための疑似セレクターはありますか? またはさらに良い: 動作する汚いハック?

私は周りを見回しましたが、誰も疑問に思っていないようです=）

(はい、私は JS がそれを実行できることを知っており、その方法も知っています。言及する必要はありません。)

4

5 に答える 5

6

このためには、 alt 属性を使用する必要があります。これは、リンクが壊れている場合に表示され、画像の背景をスタイルすることもできます: 例:

img {
  display:inline-block;
  vertical-align:top;
  min-height:50px;
  min-width:300px;
  line-height:50px;
  text-align:center;
  background:
    linear-gradient(to bottom,
      blue,
      orange,
      green);
  font-size:2em;
  box-shadow:inset 0 0 0 3px;
}

画像が表示されると、これらのスタイルは非表示になります。 http://codepen.io/anon/pen/Kxipq ご覧のとおり、壊れたリンクをチェックしませんが、目の不自由な人、検索エンジンなどに役立つ代替手段を提供し、いくつかの追加スタイルでそれを仕上げます:)

いくつかの追加の画像代替属性のベスト プラクティス

于 2014-01-15T22:06:35.890 に答える
0

いいえ。CSS セレクターレベル 2.1またはレベル 3には、そのような画像をターゲットにできるものはありません。

于 2014-01-15T21:47:10.877 に答える