Maison >interface Web >tutoriel CSS >Comment superposer des images en CSS

Comment superposer des images en CSS

青灯夜游original: 2021-07-27 17:11:1910001parcourir

Comment superposer des images avec CSS : ajoutez d'abord le style "position : absolue ;" à l'image pour un positionnement absolu ; puis utilisez les attributs margin-left et margin-top pour définir la position de l'image.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Utilisez CSS pour superposer deux images. Vous pouvez définir l'effet de superposition d'image via l'attribut de positionnement de position et les attributs margin-left et margin-top.

Exemple de code :

Utilisez CSS pour superposer les images Lorsque la souris survole la première image, la deuxième image sera affichée.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片重叠</title>
    <style>
        ul li {
            position: relative;
            float: left;
        }

        ul li #play {
            position: absolute;
            width: 150px;
            height: 100px;
            margin-top: 85px;
            margin-left: 78px;
            display: none;

        } 

        ul li #yuan {
            position: absolute;
            width: 300px;
            height: 300px;
            margin-left: 0px;
            margin-top: 0px;
        }

        ul li #yuan:hover +#play {
            display: block;
        }


        
    </style>
</head>
<body>
    <ul>
        <li>
            <!-- <img  id="play" src="img/ia_100000164.jpg" alt="Comment superposer des images en CSS" > -->
            <img  id="yuan" src="img/ia_100000165.jpg" alt="Comment superposer des images en CSS" >
            <!-- 放在下面，反而显示在上面 -->
            <img  id="play" src="img/ia_100000164.jpg" alt="Comment superposer des images en CSS" >
        </li>


    </ul>
</body>
</html>

Rendu :

Comment superposer des images en CSS

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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：

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

Article précédent：compétences CSS : comment ajouter un masque à une image (partager)Article suivant：compétences CSS : comment ajouter un masque à une image (partager)

Articles Liés

Voir plus