如何在我的html/css中显示我的背景图像

我看到了另一个关于我的问题的主题，但它并没有解决它，我试图为我的公文包放一个背景图像，但它不起作用。我不明白为什么，你有主意吗？

我的代码：

html:

<div class="main">
<div class="navbar container-fluid d-flex justify-content-center"> 
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>

css:
.main{
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}
.navbar{
height: 10vh;
background-color: purple;
position: fixed;
}

附言：对不起，我的英语不是我的第一语言。

.main{
background-image: url('http://scontent-vie1-1.xx.fbcdn.net/v/t1.0-0/p640x640/86969955_2219297081712551_4370094468804640768_o.jpg?_nc_cat=108&_nc_ohc=RXVSJ86AsuoAX_l1w_j&_nc_ht=scontent-vie1-1.xx&_nc_tp=6&oh=f79e4654f5cee0a184fa73d9faa0af49&oe=5EFBD055');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 200px;
}
.navbar{
height: 10vh;
background-color: purple;
position: fixed;
width: 100%;
padding: 20px;
}

<div class="main">
<div class="navbar container-fluid d-flex justify-content-center"> 
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>

这就是你想要的？固定属性使容器无法展开，因此没有显示背景。

类为'main'的div元素没有任何高度。因此背景图像将不会显示。

您可以执行以下选项之一：

给它一个固定的高度(不推荐(

.main {
height: 100px
}

将块元素添加到导航栏中，使主导航栏自动获得高度

.navbar {
display: block
}

在这种情况下也不要使用固定位置。

最后但同样重要的是，失去了导航栏的背景颜色，这将位于主背景图像的顶部。

我希望这能有所帮助！

.main{
background-image: url('https://cdn.pixabay.com/photo/2020/02/14/04/20/old-city-4847469_960_720.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.navbar{
height: 20vh;
background-color: rgba(0,0,0,0.5);
position: relative;
width: 100%; 
z-index: 999;
color: #fff;
padding: 20px;
}

<div class="main">
<div class="navbar container-fluid d-flex justify-content-center"> 
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>

您提供的路径错误。试试这个

<!DOCTYPE HTML>
<html>
<head>
<style>
.main{
background-image: url(http://www.cagbd.org/assets/upload/logo/1124d2b92e3b8f44b1c8f21cfebc6dae.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar{
height: 10vh;
}
</style>
</head>
<body>

<div class="main">
<div class="navbar container-fluid d-flex justify-content-center"> 
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>
</body>
</html>

.main {
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 100px;
}

相关内容

最新更新

热门标签：