CSS和显示弹性问题答案

【问题标题】：Issue with CSS and display flexCSS和显示弹性问题
【发布时间】：2017-09-29 23:23:37
【问题描述】：

我的基于 CSS 的页面存在问题。我想更改鼠标悬停在两个 div 上的背景图像，并在单击时指向另一个页面。我有 3 个问题：

当屏幕为纵向分辨率而不是横向分辨率时，背景的变化可以正常工作。
我想在背景变化时制作一个淡入淡出动画，但我不知道怎么做。
我需要 div1 和 div2 作为链接，这样不仅背景会发生变化，如果用户单击它还指向另一个页面。我无法在不阻止 flex 显示的情况下添加 div。

谢谢！

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  text-align: center;
}

@media screen and (orientation:landscape) {
  .container {
    position: absolute;
    display: flex;
    width: 75vmin;
    height: 100vmin;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .div1,
  .div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 32.5vmin;
    height: 100vmin;
    background-color: #ddd;
  }
}

@media screen and (orientation:portrait) {
  .container {
    position: absolute;
    display: flex;
    width: 100vmin;
    height: 133vmin;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .div1,
  .div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 50vmin;
    height: 133vmin;
    background-color: hsla(0, 0%, 0%, 0.1);
  }
}

.background1,
.background2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: -1;
}

.background1 {
  background: url("http://i.imgur.com/zFYHM67.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.background2 {
  background: url("http://i.imgur.com/nYKEFNF.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.div1:hover~.background1 {
  display: flex;
}

.div2:hover~.background2 {
  display: flex;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="div1">Div 1</div>
    <div class="background1"></div>
    <div class="div2">Div 2</div>
    <div class="background2"></div>
  </div>
</body>

</html>

【问题讨论】：

标签： css flexbox css-transitions

【解决方案1】：

我对你的代码（主要是css）做了一些修改，见下面的sn-p：

对于问题 1：您使用的是 @media screen and (orientation:portrait)，所以里面的样式只适用于纵向

第2期：我使用opacity和transition来制作动画效果

第 3 期：我刚刚将 div 标签更改为 a 标签

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  text-align: center;
}

@media screen and (orientation:landscape) {
  .container {
    position: absolute;
    display: flex;
    width: 75vmin;
    height: 100vmin;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .div1,
  .div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 32.5vmin;
    height: 100vmin;
    background-color: #ddd;
  }
}

.container {
  position: absolute;
  display: flex;
  width: 100vmin;
  height: 100vmin;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.div1,
.div2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 50vmin;
  height: 100vmin;
  background-color: hsla(0, 0%, 0%, 0.1);
}

.background1,
.background2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all 1s;
}

.background1 {
  background: url("https://www.w3schools.com/css/img_fjords.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.background2 {
  background: url("https://www.w3schools.com/howto/img_mountains.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.div1:hover~.background1 {
  display: flex;
  opacity: 1;
}

.div2:hover~.background2 {
  display: flex;
  opacity: 1;
}

<div class="container">
  <a href="#" class="div1">Div 1</a>
  <div class="background1"></div>
  <a href="#" class="div2">Div 2</a>
  <div class="background2"></div>
</div>

【讨论】：

非常感谢！但是有一个问题，在横向模式下，我的右侧有一个滚动条，但我的 div 应该是屏幕的高度，就像我使用 100vmin 一样。知道为什么吗？在纵向中，它完美对齐并使用全宽，所以没关系
@yoan26 我编辑了我的答案...您使用的高度为 133vmin 我只是将其更改为 100vmin