css 甘道夫

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 甘道夫相关的知识，希望对你有一定的参考价值。

<!DOCTYPE>
<html lang="en">
   
  <head>
    <meta charset="UTF-8">
    <title> Gandalf</title>
     <link rel="stylesheet" href="style.css">
  </head>
  <body>
   
    <div> 
      <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf" id="gandalf"/>
    
    <h1> Reward <span>1000</span><br>golden coins</h1>
    
    
      <h2>Gandalf</h2>
    </div>
  </body>
</html>

html
{
  background-color: black;
}

#gandalf
{
  position: relative;
  border : 4px grey solid;
  border-radius:10px;
  opacity:0.4;
  box-shadow:10px 10px 0px white;
}

h1
{
  font-size: 30px;
  color: black;
  text-align: center;
  background-color: white;
  border-style: solid;
  border-color: black;
  border-radius:10px;
  width:300px;
  height:100px;
  padding-top:20px;
  position: absolute;
  top:20px;
  margin-left: 100px;
}
#gandalf:hover
{
  opacity:1;
  z-index:2; 
}

h1:hover 
{
  opacity:0;
}
span
{
  color: orange;
}

 h2
{
  color:white;
  font-size:60px;
  position: absolute;
  top:450px;
  left: 160px;
  opacity:1;
  z-index:1;
}

 h2:hover 
{
  position:absolute;
  opacity:0;
  z-index:1; 
}

以上是关于css 甘道夫的主要内容，如果未能解决你的问题，请参考以下文章

css 甘道夫

css 甘道夫想要

html 甘道夫