5
Hier überlagern ist der Link, wie es aussieht, zur Zeit:
http://cubicfoundations.comeine SVG/PNG-Datei auf der sich ständig ändernden Gradienten Hintergrund
Was ich versuche zu erreichen:
Das Farbverlaufsdiv fungiert als Hintergrund. Das SVG-Bild (Logo div) überlagert das Farbverlaufsdiv mit einem weißen Hintergrund voller Breite und Höhe und zeigt die Verlaufsfarben durch die transparenten Teile des Logos.
Wie erreiche ich das?
Ich kann dem Gradient div auch keine 100% Höhe zuweisen - es scheint nur auf einer festen px Basis zu arbeiten?
Alle Korrekturen/Ideen sehr geschätzt!
Die HTML ist:
<!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>
Die CSS‘Pfad ist 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;
}
für die 100% der Höhe, entweder Verwendung vh und vw Einheiten oder setzen alle Eltern Ihre div Breite und Höhe auf 100 % (einschließlich HTML). Für den anderen Teil der Frage verstehe ich es nicht. – Kaiido
Ich habe es geschafft, die 100% ige Höhe mit dem folgenden Code zu #gradient zu beheben: #gradient { Breite: 100%; Höhe: 100%; Auffüllen: 0px; Rand: 0px; Position: absolut; Z-Index: -99999; \t } – MJC
Ich entschuldige mich dafür, in meiner Frage nicht klar zu sein. Ich habe einen Screenshot hinzugefügt, um zu zeigen, was ich erreichen möchte: http://cubicfoundations.com/SCREENSHOT.png Hoffentlich hilft das! – MJC