CSS ワールド - コード実践: 画像の Alt 情報の表示

ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を実現すると、次のようなエクスペリエンスの問題が発生する可能性があります。JavaScript の読み込みが遅い場合、ページに情報のない真っ白な白い画像領域のパッチが表示される可能性が高くなり、ユーザーにはコンテンツが何であるかがわかりません。
alt 属性は説明情報を提供できますが、視覚効果が乏しいため非表示になっています。画像が読み込まれる前に alt 情報を表示できます。

<!DOCTYPE html>
<html lang="ja">

    <ヘッド>
        <メタ文字セット="UTF-8">
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
        <meta http-equiv="X-UA-compatible" content="ie=edge">
        <title>CSS ワールド - コード実践 - 画像の代替情報のプレゼンテーション</title>
        <スタイル>
            /* スクロール読み込み効果 CSS */
            /* 画像 {
                可視性: 非表示;
            }

            画像[src] {
                可視性: 可視;
            } */

            画像 {
                表示: インラインブロック;
                幅: 180ピクセル;
                高さ: 100px;
                /* Firefox の代替テキストを非表示にする */
                色: 透明;
                位置: 相対的;
                オーバーフロー: 非表示;
            }

            img:not([src]) {
                /* Chrome の代替テキストと銀色の枠線を非表示にする */
                可視性: 非表示;
            }

            画像::前{
                /* ライトブルーの背景 */
                コンテンツ： "";
                位置: 絶対;
                左: 0;
                幅: 100%;
                高さ: 100%;
                背景色: #f0f3f9;
                可視性: 可視;
            }

            画像::後{
                /* 黒い alt 情報バー */
                コンテンツ: attr(alt);
                位置: 絶対;
                左: 0;
                下部: 0;
                幅: 100%;
                行の高さ: 30px;
                背景色: rgba(0, 0, 0, .5);
                色: 白;
                フォントサイズ: 14px;
                変換: translateY(100%);
                /* トランジションアニメーション効果を追加する*/
                遷移: 変換 .2s;
                可視性: 可視;
            }


            img:hover::after {
                変換: translateY(0);
            }

        </スタイル>
    </head>

    <本文>
        <div style="width: 200px;height: 200px;background: blanchedalmond;overflow: auto;">
            <!-- スクロール読み込み効果 HTML: -->
            <!-- <画像> -->
            <img alt="図1" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg">
            <img alt="瞑想する美しい女性" data-src="1.jpg">
            <img alt="図3" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg">
            <img alt="瞑想の写真" data-src="1.jpg">
        </div>
    </本文>
    <スクリプト>

    </スクリプト>

</html>

操作効果:

CSS World - コード実践における画像 ALT 情報の表示に関するこの記事はこれで終わりです。より関連性の高い CSS 画像 ALT 情報コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 音声キューイングシステムを実装するためのJavaScript

>>: MySQLはPartition関数を使用して水平分割戦略を実装します。