Скрыть прозрачный контент под другим прозрачным контентом? - PullRequest
Новая
       33

Скрыть прозрачный контент под другим прозрачным контентом?

0 голосов
/ 15 февраля 2019

Есть ли способ сделать прозрачный заголовок и несколько контейнеров div и не показывать их под прозрачным заголовком?(Если заголовок имеет размер 50px -> содержимое «останавливается», показывая, достигнет ли он верхних 50px)

Предоставление заголовку того же фонового изображения, что и для остальных, и изменение z-index не представляется возможным.

Заголовок не должен становиться темнее, когда я прокручиваю в него содержимое. смотреть здесь 

    <body>

  <header>
    header
  </header>
  <main>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <div class="content">

    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


  </main>
  <footer>footer</footer>
</body>

css 

 html {
  height: 100vh;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0; }

body {
  margin: 0;
  width: 100%;
  background-color: yellow;
  height: 100vh; }

header {
  height: 10%;
  margin-top: 0;
  top: 0;
  position: fixed;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: auto;
  padding-bottom: auto;
  box-shadow: 0 5px 5px -5px #636363;
  z-index: 10; }
  header h1 {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 200%;
    color: #FFF;
    font-family: Verdana;
    margin-left: 5%;
    top: 50%; }

.content {
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5; }

footer {
  height: 10vh;
  margin-bottom: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: auto;
  padding-bottom: auto;
  box-shadow: 0 -5px 5px -5px #636363;
  z-index: 10; }

1 Ответ

0 голосов
/ 15 февраля 2019

Вы пытались добавить еще один div между ними через z-index CSS?

Или вы можете найти нужный вам устойчивый цвет (с хромированным расширением «ColorPick Eyedropper», если у вас нет другого инструмента) и вообще не сделать заголовок полупрозрачным

Вы ищете?графический эффект Roblox, когда частично прозрачные объекты не видны позади других полупрозрачных объектов?

...