J'ai un bug d'affichage qui vient du CSS je pense mais je ne sais pas comment le résoudre.
1. Il y a un décalage entre l'image et le background.
2. Le background qui doit jouer un filtre transparent ne s'applique pas. Comment le faire passer au dessus de l'image ?
Une idée pour résoudre ca ?
Merci !
Résultat visuel actuel: https://drive.google.com/file/d/1PFhVf2 ... sp=sharing
code html:
Code : Tout sélectionner
**** ENDROITS À DÉCOUVRIR <br><br />
<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom');
?>
<?php while ($donnees = $reponse->fetch()) { ?>
<div class="vignette">
<div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag">
<img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu"/>
</div>
<?php } ?>
</body>
</html>
Code : Tout sélectionner
/* Vignette */
.vignette
{
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
font-family: montserrat;
display: inline-block;
width: 270px;
height: 302px;
border-radius: 2px;
}
.flag
{
max-width: 20px;
max-height: 15px;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top: 100px;
}
.lieu
{
font-size: 20px;
color: white;
text-transform: uppercase;
text-align: center;
position: relative;
top: 200px;
}
.pays
{
font-size: 15px;
color: white;
position: relative;
top: 200px;
text-align: center;
}
.vignette img
{
object-fit: cover;
width: 270px;
height: 302px;
object-position: 100% 0;
}
