5
Oto link, jak to wygląda obecnie:
http://cubicfoundations.comNakładanie SVG plik/png na wierzchu stale zmieniających tle gradientu
Co usiłuję osiągnąć:
Grad div działa jako tło. Obraz SVG (logo div) nakłada podziałkę gradientu na białe tło o pełnej szerokości i wysokości, pokazując kolory gradientu przez przezroczyste części logo.
Jak to osiągnąć?
Nie mogę również przypisać do elementu div gradientu o wysokości 100% - wygląda na to, że działa on tylko na podstawie px?
Wszelkie poprawki/pomysły bardzo doceniane!
HTML jest:
<!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>
CSS”ścieżka jest 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;
}
do wysokości 100%, albo użyć jednostek VH i vw lub ustawić wszyscy rodzice Twojego div szerokość i wysokość do 100 % (w tym html). dla drugiej części pytania, nie rozumiem tego. – Kaiido
Udało mi się ustalić wysokość 100%, używając następującego kodu: #gradient: #gradient { szerokość: 100%; wysokość: 100%; wypełnienie: 0px; margin: 0px; pozycja: absolutna; z-index: -99999; \t } – MJC
Przepraszam za brak jasności w moim pytaniu. Dodałem zrzut ekranu, aby pokazać, co próbuję osiągnąć: http://cubicfoundations.com/SCREENSHOT.png Mam nadzieję, że to pomoże! – MJC