Image de superposition de bouton de lecture à l'aide de CSS

Cet article explore les techniques de superposition centralement une image de bouton de lecture sur une autre image utilisant CSS. Plusieurs approches sont présentées, chacune avec différents degrés de compatibilité du navigateur.

La méthode la plus efficace

Cette approche fournit d'excellents résultats entre les navigateurs modernes et fonctionne même bien avec les versions IE8 et ultérieures. Vous pouvez trouver un exemple de travail sur jsfiddle.net/sdsj9/1/ (lien fourni dans le texte d'origine).

Tentatives précédentes

Plusieurs tentatives antérieures sont documentées, chacune avec ses propres forces et faiblesses concernant la compatibilité entre les navigateurs. Ceux-ci peuvent être trouvés sur jsfiddle.net/yaukb/1/ et jsfiddle.net/yaukb/6/ (liens de l'original).

CSS

#container {
    position: relative;
    display: inline-block;
    border: 1px solid green; /* For demonstration purposes */
}

#container * {
    box-sizing: border-box; /* For consistent box model across browsers */
}

#image {
    z-index: 9;
    text-align: center;
    border: 1px solid blue; /* For demonstration purposes */
}

#play {
    background: url('https://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
    position: absolute; /* Crucial for overlaying */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the button */
    height: 140px;
    width: 140px; /* Added for better control */
    z-index: 10;
}

html (exemple)

<div id="container">
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036457919668.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Play button overlay image using CSS " />
  <div id="play"></div>
</div>

N'oubliez pas de remplacer "your-image.jpg" par le chemin réel vers votre image. L'amélioration clé de ce CSS révisé est d'utiliser position: absolute; et transform: translate(-50%, -50%); pour un centrage précis dans le conteneur. La propriété width est également ajoutée à l'élément #play pour un meilleur contrôle sur la taille du bouton.

Cet exemple amélioré aborde plus efficacement le problème de centrage et fournit une solution plus robuste pour créer une superposition de bouton de lecture. Les FAQ du texte d'origine restent pertinentes et fournissent des informations supplémentaires précieuses.

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!