ホームページ > 記事 > ウェブフロントエンド > CSSセレクターで画像を挿入できますか?

CSSセレクターで画像を挿入できますか?

藏色散人オリジナル: 2020-12-21 09:51:513742ブラウズ

CSS セレクターでは、CSS セレクター「:before」や「:after」などの画像を挿入できます。挿入方法は、「.p_beforeImg:before {content」などの構文を使用して、content 属性を使用して画像を挿入することです。： ' '; 背景..."}。

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「css ビデオチュートリアル」

CSS セレクター: before と :after では、content 属性を使用して画像を挿入できます。

content 属性は、:before および :after 擬似要素とともに使用され、生成されたコンテンツを要素の先頭または末尾に挿入します。

説明: この属性は、要素の前後に配置される生成コンテンツを定義するために使用されます。デフォルトでは、これは多くの場合インラインコンテンツですが、このコンテンツが作成するボックスのタイプは、表示属性を使用して制御できます。

理解: 前と後:

デフォルトの表示: インライン;

content 属性を設定する必要があります。設定しないとすべてが無駄になり、content 属性は適用対象: before および :after 擬似要素;

デフォルトのユーザー選択: なし、つまり、:before および :after の内容はユーザーが選択できません;

Pseudo-要素は、:.target:hover:after などの疑似クラスと組み合わせて使用できます。

:before と :after は CSS2 で提案されたため、IE8 と互換性があります。

::before と ::after は、疑似クラスと疑似要素を区別するために CSS3 で記述されています。開く;

CSS のその他の疑似要素には、::before、::after、::first-letter、::first-line、::selection などがあります。;

利用できませんDOM の使用を通じて、それは純粋な外観にすぎません。特殊な場合には、アクセスの観点から、生成されたコンテンツは現在の画面読み取りではサポートされません。

例 1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3</title>
    <style type="text/css">
        .p_beforeImg {
            background: #eeeeee;
            width: 200px;
            height: 80px;
            border-radius: 6px;
            padding: 10px 20px;
            position: relative;
        }
        .p_beforeImg:before {
            content: &#39;&#39;;
            background: url(&#39;../img/triangle_up.png&#39;) no-repeat top left /32px 16px;/*兼容没测*/
            position: absolute;
            top: -15px;
            z-index: 2;
            width: 32px;
            height: 16px;
        }
    </style>
</head>
<body>
    <p class="p_beforeImg">通过before添加三角尖图片</p>
</body>
</html>

レンダリングの前に三角形の先端イメージを追加します:

CSSセレクターで画像を挿入できますか?

例 2:

置換「前」と「後」を組み合わせて、ワンクリックで画像スタイルを挿入します。

.p_afterImg {
        background: #eeeeee;
        width: 200px;
        height: 80px;
        border-radius: 6px;
        padding: 10px 20px;
        position: relative;
    }
    .p_afterImg:after {
        content: &#39;&#39;;
        background: url(&#39;../img/triangle_down.png&#39;) no-repeat bottom right /32px 16px;/*兼容没测*/
        position: absolute;
        bottom: -15px;
        z-index: 2;
        width: 32px;
        height: 16px;
    }

効果画像:

CSSセレクターで画像を挿入できますか?

以上がCSSセレクターで画像を挿入できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 子类 select dom 选择器 display 伪类伪元素 background

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS の比較関数: max()、min()、clamp()次の記事：CSS の比較関数: max()、min()、clamp()

続きを見る