代码

Question

我正在尝试实现特定的设计，但是到目前为止，已经偶然发现了很多复杂性。

主要问题仍然是线性渐变的背景-必须在整个视口上拉伸它以具有令人满意的效果（position: absolute;width: 100%;height: 100%）。

但这不是唯一的问题，我们在渐变图像上方还有一个背景图像 P （具有更高的z-index和不透明度0.3）和渐变只对页眉和页脚可见（以下任何内容都必须具有 P ，而不是渐变）。

然后我did that。（JSFiddle，查看下面的代码）

代码

#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>

问题：

即使我从视觉上实现了它，但实际使用中还是存在很大的顾虑。

如果看代码，#about_pattern是背景图像 P ，而#about_pattern_2是渐变图像。

卡在页眉和页脚之间的

#about_center元素必须具有比#about_pattern更低的z-index（以便它可以通过）和与{{1} }（所以我们在那里没有渐变效果）。

但是#about_pattern2位于顶部，使得#about_pattern中的每个元素都无法被用户访问。如果有人想例如滚动浏览文本，这似乎是一个大问题。

是否可以实现this effect而又不影响中心要素？谢谢！

Answer 1

一种解决方案是从z-index中删除#about_center，以避免堆叠上下文问题¹，然后您就可以放置#about_background和#intro_text，因为它们将位于渐变背景的同一堆叠上下文中。然后，您可以将一个放置在下面，另一个放置在上面。

因此您将其删除：

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

并添加以下内容：

#intro_text {
   ....
   z-index:3;
}

完整代码：

https://jsfiddle.net/tfx9pLrq/3/

#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;
  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;
  z-index: 3;
}

footer {
  position: relative;
  padding-top: 25px;
  padding-bottom: 25px;
  flex-shrink: 0;
  z-index: 3;
}

<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>

¹有关更准确的解释，我们可以参考the specification：

对于具有“ z-index：auto”的用户，将其视为已创建元素新的堆栈上下文，但任何已定位的后代和后代 实际上会创建新的堆叠上下文的应该被认为是的一部分 父级堆叠上下文，而不是这个新的。

因此，通过删除z-index，它将退回到auto，并且我们消除了在其父级的堆栈上下文中并由其父级z-index控制元素的限制。现在，它们属于与梯度相同的上部堆叠上下文。

换句话说，在父元素中添加z-index将使z-index个子元素仅被考虑在其父元素内部，之后所有内容都将考虑{ {1}}。一切都将在渐变之上或之下。

具有多层背景的z-index问题

代码

问题：

1 个答案: