为什么我的下拉按钮菜单和背景图片不起作用

时间：2018-10-10 02:33:43

标签： html css

我正在尝试以爬行动物图像为背景的下拉菜单，但似乎无法使用下拉菜单处理图像？当我取出图像时，它可以工作。我不确定是不是因为混在一起，或者是键入错误，但是我已经查看了并且找不到任何内容？

另一个问题是为什么我的背景颜色渐变（渐变不是reptile.png背景）仅显示了一半的页面。如果您将窗口缩小，它会显示为白色并且看起来不太好。我尝试使用width / height：100％100％，覆盖，并尝试将图像拉伸为高度，但是它不起作用。我想将图像拉伸到页面的高度和宽度。我认为这可能是由于身高引起的，但我不确定如何更改。

这是代码

  header {
    text-align: right;
    text-shadow: none;
  background-color: #a7a7a7;
  }

  body {
    background-image: linear-gradient(#545454, #000000);
  background-size: 100% 100%;
    background-repeat: no-repeat;
     font-family: Gill Sans, "sans-serif";
   color: #f2fdec;
   font-size: 3em;
   text-shadow: 2px 2px 2px #000000;
     padding: 0.2em;
      }

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
   opacity: 0.5;
}

h3 {
  font-size: 18px;
  font-family:
}

nav {
  font-weight: bold;
  float: right;
  color: #c1c1c1;
  font-size: 18px;
  padding: 8px 8px 8px 8px;
}

nav a:link {
  color: #f3ffe7;
  text-decoration: none;
}

nav a:visited {
  color: #f3ffe7;
  text-decoration: none;
}

nav a:hover {
  color: #f3ffe7;
  text-decoration: none;
}

nav ul {
  list-style-type: none;
}

nav a {
  text-decoration: none;
}

nav ul ul {
  position: absolute;
  background-color: #474747;
  padding: 0;
  text-align: center;
  display: none;
}

nav ul ul li {
  border: 1px solid #00005D;
  display: block;
  width: 4em;
  padding-left: 1em;
  margin-left: 0;
}

nav li:hover ul {
  display: block;
}

footer {
  font-size: 10px;
  text-align: center;
  background-color: #474747;
  padding: 8px;
  text-shadow: none;
  color: #d2d2d2;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
}

#wrapper {
  width: 100%;
  height: 100%;
}

header,
nav,
footer {
  display: block;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.herp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #4f4f4f;
  min-width: 160px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #696969;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3f5840;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Reptile Website</title>
    <link rel="stylesheet" href="home.css">
        <meta charset="utf-8">
            </head>
<body>
    <div id="wrapper">
        <header><nav><ul>
            <div class="dropdown">
                <button class="dropbtn">Home</button>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Lizards</button>
                <div class="dropdown-content">
                    <a href="geckos.html">Geckos</a>
                    <a href="chameleons.html">Chameleons</a>
                    <a href="skinks.html">Skinks</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Big Lizards</button>
                <div class="dropdown-content">
                    <a href="iguanas.html">Iguanas</a>
                    <a href="tegus.html">Tegus</a>
                    <a href="monitors.html">Monitors</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Turtles</button>
                <div class="dropdown-content">
                    <a href="turtles.html">Turtles</a>
                    <a href="tortoises.html">Tortoises</a>
                    <a href="terrapins.html">Terrapins</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Snakes</button>
                <div class="dropdown-content">
                    <a href="colubrid.html">Colubrids</a>
                    <a href="python.html">Pythons</a>
                    <a href="constrictor.html">Constrictors</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Ambibians</button>
                <div class="dropdown-content">
                    <a href="newts.html">Newts</a>
                    <a href="salamanders.html">Salamanders</a>
                    <a href="frogsntoads.html">Frogs and Toads</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Expertise</button>
                <div class="dropdown-content">
                    <a href="turtles.html">Beginner</a>
                    <a href="tortoises.html">Intermediate</a>
                    <a href="terrapins.html">Complex</a>
                </div>
        </ul></nav></header>
        
        <div class="container">
            <img src="reptile.png" alt="Reptile Background">
                <div class="herp">Explore Herping<br>
                    <h3>Your home for Herpetology Information</h3> . 
  </div>
                 </div>
         <footer>
             <p>Sasha Batz | s1467218@student.mcckc.edu</p>
         </footer>
     </div>
  </body>
 </html>

1 个答案:

答案 0 :(得分：0)

第一个问题：

该图像的父元素.container覆盖了下拉菜单，因此无法将鼠标悬停在下拉菜单上。

您可以使用z-index将其放在顶部：

.container {
    z-index: 10;
}
.container img {
    z-index: 11;
}
nav {
    z-index: 1001;
}

也不要在菜单顶部输入文字Your home for Herpetology Information。

第二个问题：

具体来说，所有基于百分比的大小都必须继承自父块元素，并且如果这些祖先中的任何一个未能指定大小，则假定它们的大小为0 x 0像素。

因此您需要将此代码添加到您的CSS代码中：

html {
    height: 100%;
    width: 100%;
}
body {
    width: 100%;
    height: 100%;
}


html {
  height: 100%;
}
header {
  text-align : right;
  text-shadow : none;
  background-color : #a7a7a7;
}
body {
  background-image : linear-gradient(#545454, #000000);
  background-size : 100% 100%;
  background-repeat : no-repeat;
  font-family : Gill Sans, "sans-serif";
  color : #f2fdec;
  font-size : 3em;
  text-shadow : 2px 2px 2px #000000;
  padding: 0.2em;
  height: 100%;
}
.container {
    z-index: 10;
}
.container img {
    z-index: 11;
}
.container .herp {
    z-index: 11;
}
.container .herp h3{
    z-index: 12;
}
nav {
    z-index: 1001;
}
img {
  max-width: 100%;
  max-height : 100%;
  height: auto;
  opacity : 0.5;
}
h3 {
  font-size : 18px;
  font-family :
}
nav {
  font-weight : bold;
  float : right;
  color : #c1c1c1;
  font-size : 18px;
  padding : 8px 8px 8px 8px;
}
nav a:link {
  color : #f3ffe7;
  text-decoration : none;
}
nav a:visited {
  color : #f3ffe7;
  text-decoration : none;
}
nav a:hover {
  color : #f3ffe7;
  text-decoration : none;
}
nav ul {
  list-style-type : none;
}
nav a {
  text-decoration : none;
}
nav ul ul {
  position : absolute;
  background-color : #474747;
  padding : 0;
  text-align : center;
  display : none;
}
nav ul ul li {
  border : 1px solid #00005D;
  display : block ;
  width : 4em;
  padding-left : 1em;
  margin-left : 0;
}
nav li:hover ul {
  display : block;
}
footer {
  font-size : 10px;
  text-align: center;
  background-color: #474747;
  padding : 8px;
  text-shadow : none;
  color : #d2d2d2;
  position : absolute;
  left : 0;
  width : 100%;
  bottom : 0;
}
#wrapper {
  width: 100%;
  height : 100%;
}
header, nav, footer {
  display : block;
}
.container {
  position: relative;
  text-align: center;
  color: white;
}
.herp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1005;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #4f4f4f;
  min-width: 160px;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #696969;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3f5840;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Reptile Website</title>
    <link rel="stylesheet" href="a.css">
    <meta charset="utf-8">
</head>
<body>
    <div id="wrapper">
        <header><nav><ul>
            <div class="dropdown">
                <button class="dropbtn">Home</button> |
            </div>
            <div class="dropdown">
                <button class="dropbtn">Lizards</button> |
                <div class="dropdown-content">
                    <a href="geckos.html">Geckos</a>
                    <a href="chameleons.html">Chameleons</a>
                    <a href="skinks.html">Skinks</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Big Lizards</button> |
                <div class="dropdown-content">
                    <a href="iguanas.html">Iguanas</a>
                    <a href="tegus.html">Tegus</a>
                    <a href="monitors.html">Monitors</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Turtles</button> |
                <div class="dropdown-content">
                    <a href="turtles.html">Turtles</a>
                    <a href="tortoises.html">Tortoises</a>
                    <a href="terrapins.html">Terrapins</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Snakes</button> |
                <div class="dropdown-content">
                    <a href="colubrid.html">Colubrids</a>
                    <a href="python.html">Pythons</a>
                    <a href="constrictor.html">Constrictors</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Ambibians</button> |
                <div class="dropdown-content">
                    <a href="newts.html">Newts</a>
                    <a href="salamanders.html">Salamanders</a>
                    <a href="frogsntoads.html">Frogs and Toads</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Expertise</button> |
                <div class="dropdown-content">
                    <a href="turtles.html">Beginner</a>
                    <a href="tortoises.html">Intermediate</a>
                    <a href="terrapins.html">Complex</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Care</button>
                <div class="dropdown-content">
                    <a href="newts.html">Leopard Gecko</a>
                    <a href="salamanders.html">Bearded Dragon</a>
                    <a href="frogsntoads.html">Kenyan Sand Boa</a>
                </div>
            </div>
        </ul></nav></header>

        <div class="container">
            <img src="reptile.png" alt="Reptile Background"/>
                <!-- <div class="herp">Explore Herping<br>
                    <h3>Your home for Herpetology Information</h3></div> -->
                </div>
        <footer>
            <p>footer</p>
        </footer>
    </div>
</body>
</html>

相关问题
最新问题