Html 如何稳定CSS中的背景图像_Html_Css

Html 如何稳定CSS中的背景图像

html css

Html 如何稳定CSS中的背景图像,html,css,Html,Css,我刚做了导航部分。我想制作网站的原始主体。但当我添加背景图像时。图像显示在导航栏上。对不起，我的英语不好，但如果你不明白我的意思。我为您添加了详细信息。注意：我的问题是调整大小而不是向下滚动以下是HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n

我刚做了导航部分。我想制作网站的原始主体。但当我添加背景图像时。图像显示在导航栏上。对不起，我的英语不好，但如果你不明白我的意思。我为您添加了详细信息。注意：我的问题是调整大小而不是向下滚动以下是HTML：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
        <title>ElectroLand</title>
    </head>
    <body>
    <!--Navbar Starts ====================================== -->
        <header>     
            <div class="container">
                    <nav>
                        <div class="logo"><img src="/img/logo.png"></div>
                        <div class="nav-list">
                            <ul class="nav-item"><li><a href="#">Home</a></li></ul>
                            <ul class="nav-item"><li><a href="#">Products</a></li></ul>
                            <ul class="nav-item"><li><a href="#">About</a></li></ul>
                            <div class="hamburger" onclick="clk()" id="burger">
                                <div id="line1"></div>
                                <div id="line2"></div>
                                <div id="line3"></div>
                            </div>
                        </div>
                    </nav>
               </div>
               <div class="sidemenu" id="sdmenu">
                <div class="side-items">
                    <ul class="side-item"><li><a href="#">Home</a></li></ul>
                    <ul class="side-item"><li><a href="#">Products</a></li></ul>
                    <ul class="side-item"><li><a href="#">About</a></li></ul>
                </div>
            </div>
        </header>
        <script src="/func.js"></script>
    <!--Navbar End===========================================-->
    <div class="mid-section">
        
    </div>
    </body>
</html>

我也做了汉堡包菜单，所以我不在乎。如果我解决了我的背景问题就可以了，为了获得更多细节，我添加了这张图片以显示尴尬的结果。我只是不想发生这种事

您是否尝试过使用z-index:1；在导航栏上

您可以使用

sticky

header{
  position:sticky;
  top:0;
  z-index:2;
}

/*导航栏启动===============================================================================*/
身体{
填充：0px；
边际：0px；
溢出x：隐藏；
}
.集装箱{
宽度：100%；
高度：10vh；
位置：相对位置；
背景色：rgb（39,44,52）；
}
.标志{
}
.nav列表{
字体系列：“非衬线”，衬线；
位置：绝对位置；
右：0px；
最高：1%；
显示器：flex；
填充：1.0%；
}
.导航列表a{
利润率：15px；
文字装饰：无；
颜色：#80e560；
过渡：颜色400ms，易于输入输出；
}
.nav列表a：悬停{
颜色：#a8fbfc；
}
.导航列表ul{
列表样式类型：无；
}
.汉堡包{
位置：相对位置；
光标：指针；
显示：无；
-moz变换原点：20px；
-ms变换原点：20px；
-o-变换-原点：20px；
-webkit转换原点：20px；
变换原点：20px；
过渡：宽度800ms，易于进出；
过渡：高度800ms，易于进出；
}
·汉堡包部{
宽度：20px；
高度：2倍；
背景色：#80e560；
保证金：3倍；
左边距：50%；
转换：转换210ms易入易出；
}
.副菜单{
位置：绝对位置；
右：0px；
宽度：40%；
身高：100%；
宽度：20%；
背景色：rgb（39,44,52）；
转化：translateX（100%）；
转换：转换500ms；
}
.附带项目{
身高：80%；
证明内容：之间的空间；
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
字体系列：“非衬线”，衬线；
对齐项目：项目之间的间距；
}
.附带项目{
列表样式类型：无；
}
.附带项目a{
颜色：白色；
文字装饰：无；
过渡：颜色500ms易于输入输出；
}
.附带项目a：悬停{颜色：#80e560；}
@媒体屏幕和屏幕（最大宽度：1500px）{
.logo{填充顶部：0.3%；}
}
@媒体屏幕和屏幕（最大宽度：768px）{
.导航项目{
显示：无；
}
.汉堡包{
显示：内联；
底部：12px；
右：35px；
}
.附带项目{
右：20%；
}
.导航列表{
填充：40px；
}
.集装箱{
高度：10vh；
}
.logo{填充顶部：2%；}
}
@媒体屏幕和屏幕（最大宽度：568px）{
.汉堡包{
右：50%；
}
.附带项目{
右：20%；
字体大小：12px；
}
.集装箱{
高度：11vh；
}
}
@媒体屏幕和屏幕（最大宽度：280px）
{     
.附带项目{
右：9%；
}
.汉堡包{
右：6%；
}
}
/*导航条末端========================================================================*/
中段{
背景图片：url(https://via.placeholder.com/1920);
宽度：100vw；
高度：100vh；
背景重复：无重复；
显示：块；
位置：相对位置；
背景位置：中心；
背景尺寸：封面；
}
标题{
位置：粘性；
排名：0；
z指数：2；
}


电致发光

您可以通过在导航栏中添加以下css行进行检查

background-position: center;
background-size: cover;

您需要更改容器的高度

正文{
填充：0px；
边际：0px；
溢出x：隐藏；
}
.集装箱{
宽度：100%；
高度：78px；
位置：相对位置；
背景色：rgb（39,44,52）；
}
.标志{
位置：绝对位置；
填充：0.6%；
垫面：0.2%；
}
.nav列表{
字体系列：“非衬线”，衬线；
位置：绝对位置；
右：0px；
最高：1%；
显示器：flex；
填充：1.0%；
}
.导航列表a{
利润率：15px；
文字装饰：无；
颜色：#80e560；
过渡：颜色400ms，易于输入输出；
}
.nav列表a：悬停{
颜色：#a8fbfc；
}
.导航列表ul{
列表样式类型：无；
}
.汉堡包{
位置：相对位置；
光标：指针；
显示：无；
-moz变换原点：20px；
-ms变换原点：20px；
-o-变换-原点：20px；
-webkit转换原点：20px；
变换原点：20px；
过渡：宽度800ms，易于进出；
过渡：高度800ms，易于进出；
}
·汉堡包部{
宽度：20px；
高度：2倍；
背景色：#80e560；
保证金：3倍；
左边距：50%；
转换：转换210ms易入易出；
}
.副菜单{
位置：绝对位置；
右：0px；
宽度：40%；
身高：100%；
宽度：20%；
背景色：rgb（39,44,52）；
转化：translateX（100%）；
转换：转换500ms；
}
.附带项目{
身高：80%；
证明内容：之间的空间；
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
字体系列：“非衬线”，衬线；
对齐项目：项目之间的间距；
}
.附带项目{
列表样式类型：无；
}
.附带项目a{
C
background-position: center;
background-size: cover;