J'essaye de définir un centre d'image de l'écran, et la dimension de l'image n'est pas aussi grande que l'écran entier. Comment puis-je donner l'impression que la couleur d'arrière-plan fait partie de l'image? Créer ainsi l'illusion que l'image est en plein écran?
J'ai essayé d'utiliser la couleur de l'image et de la définir comme une partie de la couleur d'arrière-plan, mais cela ne correspond toujours pas.
html
.container {
background-color: #F3D5DB;
}
css
<section class="container">
<img class="bg-img" src="../assets/beauty-bg-img.jpg" alt="background image">
</section>
Comme on peut le voir, l'image est centré, mais l'image et la couleur d'arrière-plan ne vont pas de pair.
Comment cela peut-il être fait?
4 Réponses :
La couleur de votre arrière-plan est unie, mais l'image que vous avez sélectionnée présente un très léger dégradé. Pour voir ceci, regardez en haut et en bas de l'image pour voir ceci. L'image est plus claire que votre arrière-plan en haut et plus sombre en bas de l'écran.
Vous pouvez résoudre ce problème en utilisant gradients , mais cela nécessiterait pas mal de essai et erreur.
Il existe plusieurs façons de procéder.
Vous pouvez définir l'image comme arrière-plan sur le corps, ou sur un div wrapper, et utiliser la propriété background-size sur cover .
Ou, vous pouvez créer un div autonome en haut de votre code, faites-le position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; < em> (définit l'image à la taille réelle de la fenêtre) et z-index: -1 (la place sous les autres divs) . C'est un bel effet car vous pouvez également ajouter opacity: 0.5 ou quelque chose de ce genre pour "assombrir" un peu l'image, et le reste de votre page Web superpose l'image.
Voici quelques bons articles sur ce que vous pouvez faire:
https: // www. smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/
https: //www.smashingmagazine.com/2009/03/backgrounds-in-web-design-examples-and-best-practices-2/
https://css-tricks.com/perfect-full- image-d'arrière-plan de la page /
https://www.webfx.com/blog/ web-design / responsive-background-image /
https://www.taniarascia.com/ background-position-fixed-and-cover-with-css /
Il y a tellement de façons de procéder. Vous pouvez parfaitement faire correspondre le dégradé, définir l'image comme arrière-plan et la faire couvrir la page. Les dégradés seraient vraiment difficiles à faire correspondre parfaitement, et vous n'avez pas demandé le second. Ma solution est d'utiliser un simple css et un éditeur de photos gratuit. (Vous n'avez pas à faire de retouche photo, j'ai l'image). J'ai pris les couleurs du haut et du bas de l'image d'origine, puis j'ai défini un dégradé css. background-image: linear-gradient (# F4DAE2, # EED5DC, # EED1D8); Super facile! Ensuite, vous définissez simplement la propriété min-height de votre corps sur 100vh pour que rien ne se répète. Nous utilisons paint.net ou photoshop pour effacer les bords de l'image dans un motif dégradé. Tout le monde peut le faire.
Vous pouvez obtenir le fichier d'image de dégradé à partir de https://i.ibb.co/0BbJ6bb/face. png . Nous mettons cette image au centre de la page et tout se marie bien! Cela fait presque un an, veuillez donc marquer cette réponse ou une autre comme solution pour clore la question. Merci!
Page de démonstration ici: https://stackoverflowanswer.glitch.me/ p >
<!DOCTYPE html>
<html lang="en">
<head>
<title>html - How to make background line up with image</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="https://i.ibb.co/0BbJ6bb/face.png">
</body>
</html>
img {
height: 100vh;
position: fixed;
top: 0px;
bottom: 0px;
left: 50%;
transform: translate(-50%, 0%);
opacity: 1;
}
body {
overflow: hidden;
background-image: linear-gradient(#F4DAE2, #EED5DC, #EED1D8);
min-height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
}
Vous pouvez essayer d'utiliser le 'mix-blend-mode', la couleur d'arrière-plan de votre image correspondra à la couleur d'arrière-plan de son parent.
Veuillez noter que cela peut ne pas fonctionner avec votre image car vous utilisez un dégradé ou il peut arriver que votre dégradé soit remplacé par une seule couleur.
Il n'est pas non plus compatible avec certains navigateurs.
.container {
background-color: #F3D5DB;
}
.bg-img {
mix-blend-mode: darken;
}
Cochez this pour plus d'options.
La couleur de cette image est un dégradé, pas un solide tout au long. Je ne pense pas que vous puissiez résoudre cela sans fond dégradé. Regardez en haut et en bas de l'image pour voir cela. L'image est plus claire que votre arrière-plan en haut et plus sombre en bas de l'écran.
C'est le problème @Cubemaster L'image elle-même n'a pas de couleur unie, et votre droite, c'est un dégradé. Donc ce n'est pas possible après tout.
Une autre option si vous pouvez modifier l'image originale est de la changer pour qu'elle devienne transparente sur les bords afin qu'elle se fondre mieux avec votre couleur d'arrière-plan. Ou si ce n'est pas une option, vous pourrez peut-être faire quelque chose de similaire en superposant une image qui est principalement transparente mais qui s'estompe à votre couleur d'arrière-plan sur les bords.
Hmm intéressant, permettez-moi de modifier mon image originale @Chris, je pourrai peut-être faire s'estomper les bords
Hey Dood - je fais juste le suivi. Votre question a-t-elle reçu une réponse satisfaisante? Si nous pouvons vous aider davantage, veuillez ajouter un commentaire sous ma réponse ou modifier votre question pour demander plus d'aide. Sinon, ce serait bien si vous pouviez choisir une «meilleure réponse» (cliquez sur la coche à côté de la réponse) pour fermer la question. Prenez également un moment pour voter (au lieu ou en plus) de la coche, pour récompenser les réponses qui ont également été utiles - cela ne coûte rien mais nous aide Si aucune réponse a été utile, veuillez publier le vôtre et le sélectionner avec la coche pour fermer la question. Merci!