5
Voici le lien de la façon dont il semble actuellement:
http://cubicfoundations.comSuperposition un SVG/fichier PNG sur l'évolution constante fond dégradé
Ce que je suis en train de réaliser:
Le div gradient agit comme arrière-plan. L'image SVG (logo div) recouvre le div de gradient avec un fond blanc de pleine largeur et de hauteur, montrant les couleurs du dégradé à travers les parties transparentes du logo.
Comment puis-je y parvenir?
Je suis également incapable d'attribuer une hauteur de 100% au div diviseur - il semble ne fonctionner que sur une base px fixe?
Toutes les corrections/idées grandement appréciées!
Le code HTML est:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cubic Foundations</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="gradient" />
<div id="logo" />
</body>
</html>
Le chemin « CSS est css/style.css
body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}
#gradient {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
position: absolute;
z-index: -99999;
}
#logo {
width: 100%;
height: 100%;
background: url(../cubic-logo-ws.svg) center center no-repeat;
}
pour la hauteur de 100%, soit utiliser des unités de vh et vw ou mis tous les parents de votre div largeur et de la hauteur à 100 % (y compris html). pour l'autre partie de la question, je ne comprends pas. – Kaiido
J'ai réussi à fixer la hauteur de 100% en utilisant le code suivant à #gradient: #gradient { largeur: 100%; hauteur: 100%; rembourrage: 0px; marge: 0px; position: absolue; indice-z: -99999; \t } – MJC
Je m'excuse de ne pas être clair dans ma question. J'ai ajouté une capture d'écran pour montrer ce que j'essaie de réaliser: http://cubicfoundations.com/SCREENSHOT.png J'espère que cela aide! – MJC