在图像上看不到导航栏(HTML，CSS)

lokaqttq 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(119)

我想提一下，我是个初学者，^^我还想提一下，如果我去掉代码块开头的div部分：

div {
        background-image: url('./images/castle.png'); `I removed this line`
        position: absolute;
        width: 100%;
        height: 100%;

我可以看到导航栏菜单，但是如果我保留它，我只能看到背景图像。我不知道该怎么做才能在图像上看到菜单。
下面您可以看到代码行。

<!DOCTYPE html>
<html>
<head>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<style>
   

    h1 {
        color: orangered;
        text-align: center;
        font-family: Arial;
    }

    img {
        background-size: cover;

    }

    body {
        margin: 0;
        padding: 0;
    }

    .bg-container {
        position: relative;
        width: 100%;
        height: 380px;  
    }
    

    .bg img {
        background-image: url('./images/castle.png');
        min-height: 380px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        width: 100%;
        height: 100%;
    }
   
    .container {
        position: absolute;
        margin: 20px;
        width: auto;
    }
   
    .topnav {
        overflow: hidden;
        background-color: #333;
        position: relative;
        z-index: 1;
    }
   
    .topnav a {
        float: left;
        color: crimson;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    
</style>
</head>
<body>

    <div class="bg-container">
    <div class="bg-img"></div>
    </div>
        <div class="container">
            <h1>Welcome to my page</h1>
            <div class="topnav">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
               
            </div>
         </div>
     
        

</body>

</html>

css

来源：https://stackoverflow.com/questions/75347442/cannot-see-the-navbar-on-image-html-css

1条答案

按热度按时间

6yt4nkrj1#

要设置 * 背景图像 *，您可以使用不同的方法：

一种方法是使用img类型的元素，使用posiztion: absolute，相对于body，或者相对于您想要的 * 元素。
第二种方法是直接从CSS属性将其设置为background-image。

要创建navbar，您应该学习使用flex-box，它在不同的情况下非常有用。要删除margins和paddings，请使用*（CSS通用选择器），如果您也想使用box-sizing: border-box;

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-image: url('https://a.cdn-hotels.com/gdcs/production12/d1130/83f1c8c6-e12d-4e69-8433-c5bbc90b5ad6.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem .8rem;
  background: #333;
}

.navbar h1 {
    color: orangered;
    text-align: center;
    font-family: Arial;
}

.navbar a {
    float: left;
    color: crimson;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

<!DOCTYPE html>
<html>
  <head>   
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
  </head>
  <body>
        <nav class="navbar">
            <h1>Welcome to my page</h1>
            <div class="nav-links">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </div>
        </nav>
  </body>
</html>

赞(0）回复(0）举报 2023-02-06

我来回答

在图像上看不到导航栏(HTML，CSS)

1条答案

相关问题

热门标签

最新问答