Question

我似乎在我的HTML / CSS中遇到了一个迷你障碍。我尝试在我的索引中使用这种交叉淡入淡出技术并且它工作正常但是当我尝试在我的第二个布局中使用它时，我打开它时图像不会出现？：（

继承人布局2的HTML：

<!DOCTYPE html>

<html>
<head>

    <title>Welcome!</title>

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

<body>
<img class="image5" src="../images/header.png" alt="header">
<a href="../index.html"><div id="cf" >
    <img class="bottom2" src="images/logo4.png" alt="logo4"/>
    <img class="top2" src="images/logo3.png" alt="logo3"/>
</div>

</body>
</html>

以下是它的CSS：

.image5 {
    position: absolute;
    top: 0px;
    left: 0px; 
    width: 1500px;
    height: 700px;
        }

 #cf {
  position:relative;
  top: 20px;
  left:20px;
  height:277px;
  width:277px;
}

 #cf img {
  position:absolute;
  left:0;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

 #cf img.top2:hover {
  opacity:0;
}

我尝试通过验证器，它显示了两个错误：

 - Error 1:

Line 20, Column 7: End tag for body seen, but there were unclosed elements.
</body>

 - Error 2:

Line 15, Column 24: Unclosed element a.
<a href="../index.html"><div id="cf">

我不确定这意味着什么。对不起，我还是个初学者。 ^^ ;;

Answer 1

您的css正在寻找标记#cf ID，然后在其中找到img。也许不正确的嵌套会弄乱它。对于验证错误，您没有关闭链接标记。需要<a href ...>关闭</a>。尝试关闭它，看看它是否有帮助。

无法查看交叉淡化图像？

1 个答案: