навигационная панель прозрачна к фону - PullRequest
Новая
       51

навигационная панель прозрачна к фону

1 голос
/ 04 августа 2020

У меня фиксированная навигационная панель и фон сайта меняется с разделами (фон разделов диагональный). Теперь я хочу, чтобы цвет фона навигационной панели изменялся с фоном цвета фона основного раздела, без простой установки цвета фона навигационной панели на тот же цвет, но чтобы навигационная панель была прозрачной для фона, но не для ее содержимого, например:

пример того, как он должен выглядеть

и не так:

пример того, как он НЕ должен выглядеть например,

Я очень благодарен за любую идею или подход о том, как чего-то достичь!

Ответы [ 3 ]

0 голосов
/ 04 августа 2020

Не поделившись некоторыми кодами того, как вы добиваетесь нежелательных результатов, вам может быть трудно помочь.

Попробуйте, и это сработает, я думаю. панели навигации, установите z-index в CSS на очень большое число, скажем, 1999. Это обеспечит, чтобы панель навигации оставалась поверх других элементов, при условии, что ни один из других элементов не имеет z-index больше, чем 1999, в данном случае. 

.navbar-container {
    z-index: 1999;
}
0 голосов
/ 23 августа 2020

Затухание содержимого с использованием Iframes (No JavaScript)

Вам нужно будет создать тег Iframe с атрибутом sr c, установленным для файла содержимого, который вы хотите затенять. Основное содержание должно иметь отдельные стили. Для возможности прокрутки iframe должен быть в фокусе. Подробнее в коде ниже.

Демо: https://fadingiframe.netlify.app/

/* Index.html style style-sheet below */

iframe {
  position: absolute;
  top: 5rem;
  width: 100vw;
  height: calc(100vh - 6rem);
  border: none;
  -webkit-mask-image: linear-gradient( /* Mask iframe */
    transparent 1rem,
    #fff 5%,
    #fff 70%,
    transparent 90%
  );
  mask-image: linear-gradient(
    transparent 1rem,
    #fff 5%,
    #fff 70%,
    transparent 90%
  );
}

/* mainContent.html style style-sheet below */

body {
  position: absolute;
  overflow-x: hidden;
  margin-top: 2rem;
  color: aliceblue;
  width: 80vw;
  left: 5vw;
}

body::-webkit-scrollbar { /* Remove scroll bar */
  display: none;
}

body {
  -ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
  scrollbar-width: none;
}

p {
  padding: 2rem;
  font-size: 2rem;
}

  <body>
    <nav></nav>
    <iframe id="main-content-iframe" src="mainContent.html"></iframe> 
    <!-- Add iframe and src to main content html file -->
    <canvas id="canvas1"></canvas>
    <footer></footer>
  </body>
  
  
  
  
  <!-- Separate html file in root directory -->
    
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
  </head>
  <body>
    <section>
     <!-- Your Content here-->
    </section>
  </body>
</html>

-------------- -------------------------------------------------- ---------

Только для текста -

Тег тела имеет особые / скрытые свойства

Я думаю, ваша проблема в том, что вы не используете " body"селектор элементов. Он имеет специальные свойства, которые по умолчанию устанавливают высоту элемента тела в соответствии с экраном. Хотя он по-прежнему позволяет прокручивать внутренний контент. Я также добавляю дополнительный фоновый div для текста. Это обеспечивает лучший опыт чтения. Взгляните на мое решение, оно может помочь вам решить вашу проблему. Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать.

Демо: https://jsfiddle.net/hexzero/5yjqk43a/

body {
  background-image: black;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

section {
  position: absolute;
  padding: 3rem 25%;
  background-image: Linear-gradient(
    transparent 6rem, <-- Should be the same as nav Height
    #fff 30%,         <-- Can set this to nav Height for abrupt cut-off
    #fff 70%,
    transparent 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-attachment: fixed;
  scroll-behavior: auto;
  z-index: 3;
}

nav {
  background: rgba(0, 0, 0, 0.616);
  width: 100%;
  position: fixed;
  top: 0;
  height: 6rem; <-- Navigation Height
  z-index: 4;
}

section > p {
  margin-top: 12rem;
  color: transparent;
}

.text-background {  <-- Remove this style section to have no background for the content,  
  width: 60%;       <-- along side the  <div class="text-background"></div> element 
  height: 100vh;
  right: 20%;
  position: fixed;
  top: 0;
  background-image: Linear-gradient(
    transparent 6rem,   <-- Background to nav height
    rgba(102, 51, 153, 0.924) 20%,
    rgba(102, 51, 153, 0.931) 90%,
    transparent 100%
  );
  z-index: 0;
}

canvas {
  width: 100%;
  background-color: rebeccapurple;
  position: fixed;
  top: 0;
  z-index: -1;
}

footer {
  position: fixed;
  width: 100%;
  height: 1rem;
  background: rebeccapurple;
  z-index: 1;
  bottom: 0;
}

p {
  font-size: 2rem;
}

Скажите мне, если бы вы были заинтересованы в JavaScript версия для лучшей поддержки браузеров. Спасибо

0 голосов
/ 04 августа 2020

Если вы хотите, чтобы панель навигации все время оставалась наверху, измените положение на фиксированное и измените значение z-index на высокое значение, чтобы он находился поверх всех других элементов, вы можете использовать следующий класс CSS для навигационная панель. Конечно, вы можете установить цвет фона и непрозрачность на значения, соответствующие вашему фону. 

.myNavBar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...