Question

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

当屏幕处于纵向分辨率但不是横向时，背景的变化可以正常工作。
我想在背景变化上有一个淡入淡出的动画，但我无法弄清楚如何。
我需要将div1和div2作为链接，以便不仅背景改变，如果用户点击，它也指向另一个页面。我无法在不阻挡弹性显示的情况下添加div。

谢谢！

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

我对您的代码（主要是css）进行了一些更改，请参阅下面的代码段：

问题1的

：您使用的是@media screen and (orientation:portrait)，因此内部样式仅适用于肖像

问题2的

：我使用opacity和transition来获得动画效果

问题3的

：我刚将div代码更改为a代码

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

CSS问题和显示flex

1 个答案: