Comment puis-je faire pivoter une image d'arrière-plan dans un conteneur sans affecter son contenu ?

Rotation de l'image d'arrière-plan dans un conteneur

Dans cette question, l'utilisateur souhaite faire pivoter l'image d'arrière-plan positionnée en bas d'une barre de défilement Chrome, mais uniquement l'image , pas son contenu.

Le CSS fourni :

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}

Pour obtenir la rotation souhaitée sans affecter le contenu, un une approche en deux étapes est suggérée. Tout d'abord, créez un pseudo-élément avec la rotation souhaitée à l'aide de la transformation CSS :

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

Cela crée un pseudo-élément transparent qui s'étend sur tout le conteneur et pivote de l'angle souhaité. Le contenu du conteneur est ensuite placé sur ce pseudo-élément pivoté.

Comme suggéré dans la ressource référencée, cette technique permet de faire pivoter les images d'arrière-plan sans déformer leur contenu.

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!