web-dev-qa-db-fra.com

Problème de parallaxe CSS dans Twenty Seventeen WordPress Theme

J'espère que c'est le bon endroit pour cela. J'ai essayé WP Developers mais la question a été considérée comme hors sujet.

J'utilise le thème Twenty Seventeen dans WordPress (4.8.2) avec une page de garde statique avec 4 sections supplémentaires. Tout en haut, lorsque vous faites défiler l'écran, le logo, le nom du site et le slogan défilent vers le haut sur l'image d'ouverture. L’arrière-plan du logo, du titre et du groupe de slogans est clair, ainsi l’image d’arrière-plan est visible.

Lorsque vous faites défiler l'écran vers le bas, la deuxième image apparaît et est complètement affichée lorsque la première image est sortie de l'écran et que le menu est maintenant en haut. Continuez à faire défiler et le texte de la section suivante défile vers le haut, couvrant la 2ème image. Cependant, ce texte a un arrière-plan blanc (dans mon cas) et l'image ne s'affiche PAS.

Il en va de même pour les paires image/texte restantes. Ce que je veux savoir faire, c’est que l’arrière-plan de ces sections de texte soit clair, comme dans la section la plus haute. J’ai vu comment leur couleur pouvait être changée, mais pas comment on pouvait la rendre transparente.

Toute aide serait grandement appréciée.

wordpresscss
1
John Biddle

Andrew Nevins a fourni cette réponse sur les forums Wordpress.org:

.site-content-container {background-color: transparent; }

Simple une fois que vous le trouvez.

1
John Biddle

C'est une question plus ancienne, mais le fichier css peut avoir changé depuis la réponse.

Si vous rencontrez ce problème maintenant. Il existe un point d'arrêt d'écran @media de 20rem pour les écrans plus petits. Cela provoque la réduction des blocs de contenu de deux colonnes en une seule colonne.

Cependant, ce point d'arrêt désactive également un peu de CSS qui donne l'effet de parallaxe.

Pour ramener l'effet, copiez la partie de css soit en dehors d'un bloc de séparation @media, soit dans votre fichier css personnalisé. Pour référence, le css pour récupérer l'effet est:

.background-fixed .panel-image {
    background-attachment: fixed;
}
1
thedanindanger

Vous devez utiliser votre navigateur outils de développement pour découvrir quel élément est impliqué. Vous pouvez ensuite ajuster le CSS à la volée pour voir quels changements donnent le résultat souhaité. Une fois que vous avez cela, vous appliquez les modifications CSS à la feuille de style ou au CSS personnalisé.

1
Steve