Question

由于某种原因，背景颜色拒绝从白色变化。我试图让它在标题下从白色变为黑色，但它拒绝改变。将“background-color：”放在正文SCSS中似乎没有改变它。

我不确定我的SCSS中是否有什么东西只是在没有意识到的情况下过度使用背景颜色？

非常感谢任何帮助

SCSS：

*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
background-color: '#010101';
}

#wrapperHeader {
width: 100vw;
height: 210px; /* height of the background image? */
background:url(images/header.png);
}

div#wrapperHeader div#header {
width: 100vw;
height:100px;
margin:0 auto;
}

div#wrapperHeader div#header img {
width: 100vw ; /* the width of the logo image */
height: 210px ; /* the height of the logo image */
margin:0 auto;
}

header {
color: white;
background-color: dimgrey ;
clear: left;
text-align: center;
}

.toggle_menu{
position: fixed;
padding: 17px 20px 15px 15px;
margin-top: 210px;
color: white;
cursor: pointer;
background-color: #000;
z-index: 1000000;
font-size: 2em;
opacity: 0;

}

.sidebar_menu{
position: fixed;
width: 100vh;
max-width: 250px;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity: 0,9;
transition: all 0.3s  ease-in-out;
}

.fa-times{
right: 10px;
top: 10px;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: red;
transition: all 0.3s  ease-in-out;

}

.fa-times:hover{
opacity: 1 ;
}

.boxed_item {
font-family: 'Open Sans';
font-weight: 200;
padding: 10px 20px;
display: inline-block;
border: solid 2px white;
box-sizing: border-box;
font-size: 22px;
color: white;
text-align: center;
margin-top: 70px;

}

.logo_bold{
font-weight: 800;
}

.logo_title{
color: white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0px;
}

.nav_selection{
margin: 0, 0;
display: block;
width: 200;
margin-top: 100px;
margin-left: 5px;

}

.nav_item{
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s  ease-in-out;

}

.hide_menu{
margin-left: -250px;

}

.opacity_one{
opacity: 1;
}

.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; 

font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s  ease-in-out;
}

Answer 1

在三个地方，你给出了三种不同风格的背景颜色代码。请遵循任何格式。

切勿在引号中加上颜色。你已经在*{ background-color: '#010101'; }中给出了它。它应该是*{ background-color: #010101; }。
您已经background-color: dimgrey ;，所以每次颜色名称不起作用时，您都会给出颜色代码。

这是您必须进行更改的标题部分。对于dimgrey，颜色代码为：#696969，因此您的代码将为：

header {
color: white;
background-color: #696969; // check this line.
clear: left;
text-align: center;
}

它将改变标题部分的背景颜色。你必须只检查那部分。

其他样式可能会覆盖标题的背景。在这种情况下，您必须将!important放在代码中，如下所示：

header {
color: white;
background-color: #696969 !important; // check this line.
clear: left;
text-align: center;
}

如果有帮助，请告诉我。

Answer 2

更改背景颜色：＆＃39;＃010101＆＃39 ;;这个 background-color：＆＃39;＃010101！important＆＃39;;

背景颜色不会从白色变化

2 个答案: