5
Ecco il link di come appare attualmente:
http://cubicfoundations.comsovrapponendo una file in formato SVG/PNG in cima alla continua evoluzione sfondo sfumato
Quello che sto cercando di realizzare:
Il gradiente funge da sfondo. L'immagine SVG (logo div) si sovrappone al div del gradiente con uno sfondo bianco a tutta larghezza, mostrando i colori sfumati attraverso le parti trasparenti del logo.
Come ottengo questo?
Non riesco nemmeno ad assegnare un'altezza del 100% al div di gradiente - sembra funzionare solo su una base fissa di px?
Tutte le correzioni/idee molto apprezzate!
L'HTML è:
<!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>
Il CSS' percorso è 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;
}
per l'altezza di 100%, utilizzare VH e vw unità o impostare la larghezza tutti i genitori del div e l'altezza a 100 % (incluso html). per l'altra parte della domanda, non capisco. – Kaiido
Sono riuscito a correggere l'altezza del 100% utilizzando il seguente codice per #gradient: #gradient { larghezza: 100%; altezza: 100%; padding: 0px; margin: 0px; posizione: assoluta; z-index: -99999; \t } – MJC
Mi scuso per non essere stato chiaro nella mia domanda. Ho aggiunto uno screenshot per mostrare quello che sto cercando di ottenere: http://cubicfoundations.com/SCREENSHOT.png Speriamo che questo aiuti! – MJC