5
Вот ссылка, как она выглядит в данный момент:
http://cubicfoundations.comНаложение SVG/файл PNG на вершине постоянно меняющихся градиентный фон
То, что я пытаюсь достичь:
Градиент div действует как фон. Изображение SVG (логотип div) накладывает градиентный div с белым фоном полной ширины и высоты, отображая цвета градиента через прозрачные части логотипа.
Как это достичь?
Я также не могу назначить высоту градиента высотой 100% - она работает только на фиксированной основе px?
Любые исправления/идеи очень ценятся!
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>
CSS-»Путь 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;
}
для высоты 100%, либо использовать VH- и VW единиц или установить все родители вашего Div по ширине и высоте до 100 % (включая html). для другой части вопроса, я не понимаю. – Kaiido
Мне удалось зафиксировать 100% -ную высоту, используя следующий код: #gradient: #gradient { {@}: 100%; высота: 100%; прокладка: 0px; margin: 0px; позиция: абсолютная; z-index: -99999; \t } – MJC
Я извиняюсь за то, что не был ясен в своем вопросе. Я добавил скриншот, чтобы показать, чего я пытаюсь достичь: http://cubicfoundations.com/SCREENSHOT.png Надеюсь, это поможет! – MJC