Comment faire pivoter une image d'arrière-plan en CSS sans faire pivoter son contenu ?

Rotation d'une image d'arrière-plan dans un conteneur sans affecter le contenu

Lorsqu'il s'agit de styliser les composants d'un site Web, un élément commun est la barre de défilement. Pour un design plus attrayant visuellement, vous souhaiterez peut-être personnaliser les éléments de la barre de défilement. Cependant, la rotation de l'image d'arrière-plan sur une barre de défilement peut ne pas toujours se comporter comme prévu.

Dans Chrome, la rotation de l'image d'arrière-plan peut également faire pivoter le contenu qu'elle contient. Si vous souhaitez faire pivoter l'image sans faire pivoter son contenu, voici une solution potentielle :

Une solution efficace à ce problème est présentée sur http://www.sitepoint.com/css3-transform-background-image/ :

#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);
}

Ce code crée un pseudo-élément à l'aide du sélecteur :before. Il positionne de manière absolue une boîte transparente dont les dimensions sont deux fois supérieures à celles de son élément parent et la centre dans celui-ci. L'image d'arrière-plan est ensuite appliquée à ce pseudo-élément, garantissant qu'il pivote indépendamment du contenu réel.

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!