CSSセレクターで画像を挿入できますか?-CSSチュートリアル-php.cn

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

藏色散人

リリース： 2020-12-21 09:52:07

オリジナル

3784 人が閲覧しました

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

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

このチュートリアルの動作環境: 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セレクターで画像を挿入できますか?