所以我只想更改我网站的一小部分。我以为这很容易，但不知何故它没有改变，我不知道为什么。我正在使用引导程序，所以这可能会让它有点困难。我想将侧边栏从一种纯色更改为图像。它只是不显示，当我删除颜色时，它什么也没显示。我正在尝试使用"背景图像"属性。
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/flat2.css" rel="stylesheet">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="border-right" id="sidebar-wrapper" >
<div class="sidebar-heading"> <img src="textflat.png" class="title" alt="FLAT"> </div>
<div class="list-group list-group-flush zijkantje">
<a href="index.html"> <img src="text/home.png" onMouseOver="this.src='text/home2.png'" onMouseOut="this.src='text/home.png'" alt="Home" class="glassescase" id="thuis"></a>
<a href="risoprints.html"> <img src="text/risoprints.png" onMouseOver="this.src='text/risoprints2.png'" onMouseOut="this.src='text/risoprints.png'" alt="Risoprints" class="glassescase" id="glassescase"></a>
<a href="paintings.html"> <img src="text/paintings.png" onMouseOver="this.src='text/paintings2.png'" onMouseOut="this.src='text/paintings.png'" alt="Paintings" class="glassescase" id="littlehouse"></a>
<a href="tiles.html"> <img src="text/tiles2.png" onMouseOver="this.src='text/tiles.png'" onMouseOut="this.src='text/tiles2.png'" alt="Tiles" class="glassescase" id="ceramic"></a>
<a href="alphabet.html"> <img src="text/alphabet.png" onMouseOver="this.src='text/alphabet2.png'" onMouseOut="this.src='text/alphabet.png'" alt="Alphabet patterns" class="glassescase" id="green"></a>
<a href="collage.html"><img src="text/collage.png" onMouseOver="this.src='text/collage2.png'" onMouseOut="this.src='text/collage.png'" alt="Collage" class="glassescase" id="collage"></a>
<a href="tarotdeck.html"><img src="text/Tarotdeck.png" onMouseOver="this.src='text/tarotdeck2.png'" onMouseOut="this.src='text/Tarotdeck.png'" alt="Tarot deck" class="glassescase" id="tarot"></a>
<a href="digital.html"><img src="text/digital.png" onMouseOver="this.src='text/digital2.png'" onMouseOut="this.src='text/digital.png'" alt="Digital" class="glassescase" id="digital"></a>
</div>
</div>
这是针对更大的屏幕，这是css： 导航栏2适用于较小的屏幕。
#sidebar-wrapper {
margin-left: 0;
width:150px;
background-image: url("sidebar.png") !important;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
.navbar2 {
display: none;
}
.zijkantje {
position: relative;
display: flex;
align-items:flex-start;
margin-top:10px;
justify-content:space-around;
margin-left: 27px;
}
希望这足以说明出了什么问题。我总是发现从已经完成的网站上更改一个小细节更困难哈哈。顺便说一句，我是编码新手，请善待:)
您可以使用浏览器上集成的检查器来查看代码，无论如何：
- 您确定要使用的正确图像路由吗？
- 设置背景重复和背景位置属性以确保图像正确显示，并在必要时设置背景大小。
- 检查侧导航是否具有背景混合模式属性，然后将其删除。