VIKEnut'

Pt

РусскийEspañol

Tema escuro

Write

Tema escuro

Pt

РусскийEspañol
htmlcss

problema do índice z com fundo de várias camadas

Estou tentando implementar um design específico, mas já deparamos com muitas complexidades até agor

O principal problema continua sendo o pano de fundo do gradiente linear - ele deve ser esticado em toda a janela de exibição para ter um efeito satisfatório position: absolute;width: 100%;height: 100%).

Mas esse não é o único problema, também temos uma imagem de fundoP acima dessa imagem de gradiente (com maior índice z e opacidade0.3) o gradiente deve ser visível apenas para cabeçalho e rodapé (qualquer coisa abaixo deve ter apenasP e não gradiente).

E eudid that. JSFiddle, veja o código abaixo)

Códig

#index_header {
  display: block;
  position: relative;
}

#index_navigation {
  position: relative;
  top: 0px;
  padding-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_logo {
  display: block;
  width: 150px;
  height: 52px;
  background-image: url("images/index/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#index_navigation_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_center {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_core {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style-type: none;
  text-align: center;
  min-width: 420px;
  padding: 0;
  width: 60%;
}

#index_navigation_core li {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#index_navigation_core li a {
  color: white;
  font-size: 1.250em;
  text-decoration: none;
  cursor: pointer;
}

#navigator_authentication {
  display: block;
  background-color: white;
  text-decoration: none;
  color: #860001;
  cursor: pointer;
  font-size: 1.125em;
  padding: 10px 30px 10px 30px;
  border-radius: 20px;
}

#index_footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_footer_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_left p {
  font-size: 0.938em;
  font-family: 'bpg_arialregular';
  color: white;
}

#social_media_btns {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  list-style-type: none;
}

#social_media_btns li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

#social_media_btns li a {
  display: block;
  width: 30px;
  height: 30px;
}

#social_media_facebook {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/facebook.png");
}

#social_media_youtube {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/youtube.png");
}

#social_media_twitter {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/twitter.png");
}

.present {
  border-bottom: solid white 3px;
}

.nav_button {
  -webkit-transition: border 0.35s ease;
  -o-transition: border 0.35s ease;
  transition: border 0.35s ease;
}

.nav_button:hover {
  border-bottom: solid white 3px;
}

#mobile_menu {
  display: none;
  width: 80px;
  height: 80px;
  cursor: pointer;
  background-image: url("images/icons/menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@media only screen and (max-width: 880px) {
  #index_navigation {
    min-width: 300px;
  }
  #index_navigation_center {
    display: none;
  }
  #mobile_menu {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  #index_footer {
    min-width: 300px;
  }
}

@media only screen and (max-width: 500px) {
  #navigator_authentication {
    font-size: 0.9em;
    padding: 5px 10px 5px 10px;
  }
  #mobile_menu {
    width: 60px;
    height: 60px;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: #F5F5F5;
}

#index_overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#index_header {
  z-index: 3;
}

#about_pattern {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("https://i.imgur.com/F8SFW2p.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

#about_pattern_2 {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%);
  border: 1px solid #000000;
  box-sizing: border-box;
}

#index_navigation {
  padding-bottom: 25px;
}

#nav_background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#about_center {
  position: relative;
  display: flex;
  z-index: -1;
  overflow-y: scroll;
  flex-grow: 1;
}

#about_background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #F5F5F5;
  z-index: -1;
}

#foot_background {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
}

#intro_text {
  position: relative;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 1.125em;
  text-decoration: none;
  line-height: normal;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  overflow-y: auto;
  text-align: left;
  color: #4F4F4F;
}

footer {
  position: relative;
  padding-top: 25px;
  padding-bottom: 25px;
  flex-shrink: 0;
  z-index: 3;
}
<!DOCTYPE html>
<html lang="ge">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="about.css" type="text/css" charset="utf-8">
  <link rel="stylesheet" href="universal.css" type="text/css" charset="utf-8">
</head>

<body>
  <div id="index_overlay">
    <div id="about_pattern"></div>
    <div id="about_pattern_2"></div>
    <header id="index_header">
      <div id="nav_background"></div>
      <div id="index_navigation">
        <div id="index_navigation_left">
          <a id="index_logo" href="/"></a>
        </div>
        <div id="index_navigation_center">
          <ul id="index_navigation_core">
            <li>
              <a href="/" class="nav_button present">btn1</a>
            </li>
            <li>
              <a href="/navigator" class="nav_button">btn2</a>
            </li>
            <li>
              <a href="/about_us" class="nav_button">btn3</a>
            </li>
          </ul>
        </div>
        <div id="mobile_menu"></div>
        <div id="index_navigation_right">
          <a href="/authentication" id="navigator_authentication">btn4</a>
        </div>
      </div>
    </header>
    <div id="about_center">
      <div id="about_background"></div>
      <div id="intro_text">
        <div style="text-align: center;">text here</div>
        <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <footer>
      <div id="foot_background"></div>
      <div id="index_footer">
        <div id="index_footer_left">
          <p>&copy 2018 mysite</p>
        </div>
        <div id="index_footer_right">
          <ul id="social_media_btns">
            <li>
              <a target="_blank" id="social_media_facebook"></a>
            </li>
            <li>
              <a target="_blank" id="social_media_youtube"></a>
            </li>
            <li>
              <a id="social_media_twitter"></a>
            </li>
          </ul>
        </div>
      </div>
    </footer>
  </div>
  <script src="scripts/jquery/jquery.js"></script>
  <script src="scripts/custom/main.js"></script>
</body>

</html>

Problema

Embora eu tenha conseguido visualmente isso, há uma preocupação significativa com o uso prátic

Se você olhar o código,#about_pattern é uma imagem de plano de fundoP e#about_pattern_2 é uma imagem gradiente.

#about_center elemento preso entre cabeçalho e rodapé, deve ter um índice z menor em comparação com#about_pattern (para que ele possa passar) e um índice z igual ou superior a#about_pattern2 (portanto, não temos efeito de gradiente lá

Mas#about_pattern estar no topo, cria todos os elementos em#about_center não acessível ao usuário. O que parece ser um grande problema se alguém quiser, por exemplo, rolar o texto ...

É possível alcançareste efeito sem bloquear o elemento central? Obrigado

questionAnswers(1)

yourAnswerToTheQuestion

Perguntas populares

0 a resposta

Misturar bibliotecas estáticas e bibliotecas compartilhadas

0 a resposta

Java - quando usar a palavra-chave &#39;this&#39; [duplicada]

0 a resposta

questão genérica e herança

0 a resposta

Erro SQL: 1191 - Não é possível encontrar o índice FULLTEXT correspondente à lista de colunas

0 a resposta

enviar mensagem pelo viber ou whatsapp programaticamente [fechado]