个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 00:59:50 25 4
gpt4 key购买 nike

我想在将爬行动物图像作为背景的同时创建一个下拉菜单，但我似乎无法让下拉菜单与其中的图像一起使用？当我取出图像时，它起作用了。我不确定这是否只是因为混淆了，或者可能是打字错误，但我已经看过但找不到任何东西？

另一个问题是为什么我的背景颜色渐变(渐变不是 reptile.png 背景)只显示了一半的页面。如果你把窗口变小，它会显示白色而且看起来不太好。我试过使用宽度/高度:100% 100%，覆盖，并尝试将图像拉伸(stretch)为高度，但它不起作用。我想让图像拉伸(stretch)到页面的高度和宽度。我认为这可能是由于高度的原因，但我不确定如何改变它。

这是代码

  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>

最佳答案

第一个问题:

该图像使其父元素 .container 覆盖下拉菜单，因此您不能将鼠标悬停在下拉菜单上。

你可以使用z-index把它放在最上面:

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

并且不要在菜单顶部制作文本爬虫学信息之家。

第二个问题:

具体来说，所有基于百分比的尺寸都必须从父 block 元素继承，并且如果这些祖先元素中的任何一个未能指定尺寸，则假定它们的尺寸为 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>

关于html - 为什么我的下拉按钮菜单和背景图片不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52731787/

25 4 0
文章推荐： c++ - 如何将字符串数组的值分配给 "Name"+ #，例如。名称 1、名称 2、名称 3 等。C++
文章推荐： html - 在固定 div 内居中固定 div
文章推荐： c++ - 如何从 pimpl 类调用调用者类的复制构造函数？
文章推荐： javascript - 单击事件显示文本框长度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com