Le sélecteur CSS peut-il insérer des images ?-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Le sélecteur CSS peut-il insérer des images ?

Dec 21, 2020 am 09:51 AM

css

Les sélecteurs CSS peuvent insérer des images, tels que les sélecteurs CSS ":before" et ":after". La méthode d'insertion consiste à utiliser l'attribut content pour insérer des images, en utilisant une syntaxe telle que ".p_beforeImg:before {content". : ' '; arrière-plan..."}.

Le sélecteur CSS peut-il insérer des images ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

Sélecteurs CSS : avant et :après peuvent utiliser l'attribut content pour insérer des images. L'attribut

content est utilisé avec les pseudo-éléments :before et :after pour insérer le contenu généré en tête ou en queue de l'élément.

Description : Cet attribut permet de définir le contenu généré placé avant ou après l'élément. Par défaut, il s'agit souvent de contenu en ligne, mais le type de boîte que ce contenu crée peut être contrôlé à l'aide de l'attribut display.

Comprendre : avant et :après

Affichage par défaut : en ligne

L'attribut content doit être défini, sinon tout est inutile et l'attribut content ne peut être appliqué qu'à : pseudo-élément avant et :après ;

sélection par l'utilisateur par défaut : aucun, c'est-à-dire que le contenu de :avant et :après ne peut pas être sélectionné par l'utilisateur

le pseudo-élément peut ; être utilisé en combinaison avec des pseudo-classes, telles que : . target:hover:after.

:before et :after ont été proposés en CSS2, ils sont donc compatibles avec IE8

::before et ::after sont écrits en CSS3, afin de distinguer les pseudo classes et les pseudo éléments ; On;

Les autres pseudo-éléments en CSS incluent ::before, ::after, ::first-letter, ::first-line, ::selection, etc.; passé par le DOM Use, ce n'est que de la pure apparence. Dans des cas particuliers, le contenu généré n'est pas pris en charge par la lecture d'écran actuelle du point de vue de l'accès.

Exemple 1 : Ajouter une image de pointe de triangle avant

<!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>

Copier après la connexion

Rendu :

Le sélecteur CSS peut-il insérer des images ? Exemple 2 :

Remplacer l'avant avec l'après, et insérez le style d'image, utilisez-le simplement

.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;
    }

Copier après la connexion

Rendu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn