HTML 着陆页答案

【问题标题】：HTML Landing pageHTML 着陆页
【发布时间】：2023-02-13 20:42:53
【问题描述】：

我正在尝试创建一个显示 2 个徽标的登录页面。悬停时，背景图像应出现在页面的左侧，但应从上到下填充。目前它只填充徽标的 div 容器。我不太擅长编码，但在创建这些代码时得到了帮助。

下面的代码 HTML

<!DOCTYPE html>
<html>
<head>
  <title>Landing Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="left-logo">
        <img src="images/logo-left.png" alt="Left Logo">
        <div class="left-bg"></div>
      </div>
      <div class="right-logo">
        <img src="images/logo-right.png" alt="Right Logo">
        <div class="right-bg"></div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

body {
background-color: white;
}

.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.row {
display: flex;
width: 80%;
}

.left-logo, .right-logo {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.left-logo img, .right-logo img {
opacity: 0;
transition: opacity 5s;
}

.left-bg, .right-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.5s;
}

.left-logo:hover .left-bg {
opacity: 1;
background-image: url(images/bg-left.png);
}

.right-logo:hover .right-bg {
opacity: 1;
background-image: url(images/bg-right.png);
}

.left-logo img, .right-logo img {
opacity: 1;
}

试图将图像放在 left-bg 所在的 css 代码中，但仍然无效。

【问题讨论】：

“试图把它放在后台但没用”- 不知道这到底是什么意思。请用代码向我们展示您实际尝试的内容，而不是给出可能意味着任何数量可能的事情的模糊口头描述。

标签： html css

【解决方案1】：

尝试添加高度：100vh；到 .row 类和 margin:0;到正文标签如下：

body {
background-color: white;
margin: 0;
}

.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.row {
display: flex;
width: 80%;
height: 100vh;
}

.left-logo, .right-logo {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.left-logo img, .right-logo img {
opacity: 0;
transition: opacity 5s;
}

.left-bg, .right-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.5s;
}

.left-logo:hover .left-bg {
opacity: 1;
background-image: url(https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg);
}

.right-logo:hover .right-bg {
opacity: 1;
background-image: url(https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg);
}

.left-logo img, .right-logo img {
opacity: 1;
}

<head>
  <title>Landing Page</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="left-logo">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOyCtPSy5vZ6NNKe6nmW5aEAWDfv2R3bV72g&usqp=CAU" alt="Left Logo">
        <div class="left-bg"></div>
      </div>
      <div class="right-logo">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOyCtPSy5vZ6NNKe6nmW5aEAWDfv2R3bV72g&usqp=CAU" alt="Right Logo">
        <div class="right-bg"></div>
      </div>
    </div>
  </div>
</body>

【讨论】：

让我知道这是否是您需要的
嗨 Rizeen，感谢您的帮助，现在它从上到下显示很好，但屏幕边缘和图像之间仍然有空白。
你是说左边和右边吗？