Question

这是我第一次使用Stackoverflow，所以我希望我能很好地解释我的问题：

当导航栏折叠时，我想将其导航栏的背景颜色更改为白色。也就是说，在较小的屏幕上，会出现一个按钮，您可以按该按钮以显示导航栏的内容。目前，我的导航栏背景颜色是透明的，并且该主题在导航栏折叠后仍然有效。

仅供参考-如下面的代码所示，我正在使用引导程序。 JS部分是在向下滚动页面时将实体类添加到我的导航栏中，但这与我的崩溃问题无关。

为了更改下拉列表的背景颜色，我似乎找不到合适的类进行编辑。

这是我的HTML（为多个lorem ipsum行表示歉意）：

$(document).ready(function() {
	// Transition effect for navbar
	$(window).scroll(function() {
		// checks if window is scrolled more than 500px, adds/removes solid class
		if ($(this).scrollTop() > 300) {
			$('.navbar').addClass('solid'),
				$('.navbar-brand').addClass('solid'),
				$('.navbar-dark .navbar-nav .nav-link').addClass('solid');
		} else {
			$('.navbar').removeClass('solid'),
				$('.navbar-brand').removeClass('solid'),
				$('.navbar-dark .navbar-nav .nav-link').removeClass('solid');
		}
	});
});

@import url(https://fonts.googleapis.com/css?family=Lato:400,700|Oswald);

body {
	margin: 0;
}

body {
	background-image: -webkit-linear-gradient(top, #ff0060, #ff6975);
	background-image: -o-linear-gradient(top, #ff0060 0, #ff6975 100%);
	background-image: linear-gradient(180deg, #3c1fbd 0, #1100a8ad);
	background-repeat: repeat-x;
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FFFF0060", endColorstr="#FFFF6975", GradientType=0);
	font-family: Lato, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.58;
	color: #555;
	background-color: #fff;
}

.white-text-container .fa-icon,
.white-text-container a,
.white-text-container h1,
.white-text-container h2,
.white-text-container h3,
.white-text-container h4,
.white-text-container h5,
.white-text-container p {
	color: #fff;
}

.section-container {
	padding: 60px 0 40px;
}


.navbar {
	height: 55px;
	background-color: transparent;
	border: none;
	color: white;
	z-index: 100;
	transition: background-color 1s ease 0s;
	padding: 0rem 3rem !important;
}
.navbar-dark .navbar-nav .nav-link {
	color: rgb(253, 253, 253) !important;
}

.navbar.solid {
	background-color: white;
	transition: background-color 1s ease 0s;
	box-shadow: 0 0 4px grey;
	color: black !important;
}
.navbar .navbar-brand.solid {
	color: black;
	transition: color 1s ease 0s;
}
.navbar-dark .navbar-nav .nav-link.solid {
	color: black !important;
	transition: color 1s ease 0s;
}

h1 {
	font-size: 60px !important;
	margin-top: 25px !important;
	margin-bottom: 12.5px !important;
	font-family: Oswald, Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
	color: #000;
	font-size: 2em;
	margin: .67em 0;
	display: block;
	font-size: 2em;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}

.fa-icon.fa-icon-2x {
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 28px;
}
.fa-icon {
	color: #000;
	width: 40px;
	height: 32px;
	display: inline-block;
	line-height: 29px;
	font-size: 15px;
	text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="shortcut icon" type="image/png" href="assets/cv2.png">

</head>
<body>

    
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
        <a href="#" class="navbar-brand">Home</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>   
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link"><i class="fa fa-envelope"></i> Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    
    <main class="content-wrapper">
  
        <header class="white-text-container section-container">
            <div class="text-center">
                <h1>Lorem ipsum</h1>
                <p>Lorem ipsum</p>
      
            </div>
        </header>



        <div class="container">
                <div class="row">
                  <div class="col-xs-12">
             
                     <div class="card">
                       <div class="card-block">
                         <h2>About</h2>
                         <div class="row">
                           <div class="col-md-4">
                             <p><img src="./assets/images/img-01.jpg" class="img-responsive" alt=""></p>
                           </div>
                           <div class="col-md-8">
             
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                           <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             
                           </div>
                         </div>
                       </div>
                     </div>

    </main>


    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html>

我希望单击打开按钮时，导航栏下拉列表的背景颜色为白色。

Answer 1

请在CSS中尝试此代码。

css

@media only screen and (max-width: 575px) {
   #navbarMenu {
     background-color: #fff;
   }
   #navbarMenu a {
    color: #000 !important;
    padding: 7px 15px;
   }
.navbar-dark.solid .navbar-toggler span {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark.solid .navbar-toggler {
    border-color: #000;
}

}

Answer 2

您可以使用@media来控制屏幕宽度并使用mix-blend-mode作为按钮，即可根据背景颜色简单地更改颜色。 （不支持 IE 中的混合混合模式）

CSS：

android:visibility="invisible"

@media only screen and (max-width: 600px) {
  #navbarMenu {
    background-color: #fff;
  }
  #navbarMenu a {
    color: #000 !important;
    padding: 7px 15px;
  }
  .navbar-dark.solid .navbar-toggler span {
    mix-blend-mode: difference;
  }
  .navbar-dark.solid .navbar-toggler {
    border-color: #000;
  }
}

$(document).ready(function() {
  // Transition effect for navbar
  $(window).scroll(function() {
    // checks if window is scrolled more than 500px, adds/removes solid class
    if ($(this).scrollTop() > 300) {
      $('.navbar').addClass('solid'),
        $('.navbar-brand').addClass('solid'),
        $('.navbar-dark .navbar-nav .nav-link').addClass('solid');
    } else {
      $('.navbar').removeClass('solid'),
        $('.navbar-brand').removeClass('solid'),
        $('.navbar-dark .navbar-nav .nav-link').removeClass('solid');
    }
  });
});

@import url(https://fonts.googleapis.com/css?family=Lato:400,700|Oswald);
body {
  margin: 0;
}

body {
  background-image: -webkit-linear-gradient(top, #ff0060, #ff6975);
  background-image: -o-linear-gradient(top, #ff0060 0, #ff6975 100%);
  background-image: linear-gradient(180deg, #3c1fbd 0, #1100a8ad);
  background-repeat: repeat-x;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FFFF0060", endColorstr="#FFFF6975", GradientType=0);
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.58;
  color: #555;
  background-color: #fff;
}

.white-text-container .fa-icon,
.white-text-container a,
.white-text-container h1,
.white-text-container h2,
.white-text-container h3,
.white-text-container h4,
.white-text-container h5,
.white-text-container p {
  color: #fff;
}

.section-container {
  padding: 60px 0 40px;
}

.navbar {
  height: 55px;
  background-color: transparent;
  border: none;
  color: white;
  z-index: 100;
  transition: background-color 1s ease 0s;
  padding: 0rem 3rem !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgb(253, 253, 253) !important;
}

.navbar.solid {
  background-color: white;
  transition: background-color 1s ease 0s;
  box-shadow: 0 0 4px grey;
  color: black !important;
}

.navbar .navbar-brand.solid {
  color: black;
  transition: color 1s ease 0s;
}

.navbar-dark .navbar-nav .nav-link.solid {
  color: black !important;
  transition: color 1s ease 0s;
}

h1 {
  font-size: 60px !important;
  margin-top: 25px !important;
  margin-bottom: 12.5px !important;
  font-family: Oswald, Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #000;
  font-size: 2em;
  margin: .67em 0;
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.fa-icon.fa-icon-2x {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 28px;
}

.fa-icon {
  color: #000;
  width: 40px;
  height: 32px;
  display: inline-block;
  line-height: 29px;
  font-size: 15px;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  #navbarMenu {
    background-color: #fff;
  }
  #navbarMenu a {
    color: #000 !important;
    padding: 7px 15px;
  }
  .navbar-dark.solid .navbar-toggler span {
    mix-blend-mode: difference;
  }
  .navbar-dark.solid .navbar-toggler {
    border-color: #000;
  }
  }

折叠的导航栏下拉时如何更改其背景颜色？

2 个答案: