Блог

Я использую Bootstrap 5 вместе с кодом Visual Studio для разработки веб-сайта. Я добавил карусель на целевую страницу, и она работает отлично. Единственная проблема, с которой я сталкиваюсь, заключается в том, что цвет фона застрял на темно-сером, и мне нужно изменить его на белый. Я попытался окружить его div и изменить цвет фона, а также сослаться на класс carousel в ccs и изменить там цвет фона, но мне не повезло. Пожалуйста, смотрите Ниже HTML-разметку с подробным описанием карусели, а также CCS, которые я использовал для ее оформления. Буду признателен за любую помощь. Большое спасибо!

    <div class="carouselSize">

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption text-start">
              <img src="https://cdn.pixabay.com/photo/2015/05/28/16/37/sport-788105_960_720.jpg" width="575px">
            <h1>Example headline.</h1>
            <p>Some representative placeholder content for the first slide of the carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Some representative placeholder content for the second slide of the carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption text-end">
            <h1>One more for good measure.</h1>
            <p>Some representative placeholder content for the third slide of this carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
.carousel-item{
    height: 32rem;
    background: white;
     position: relative;
}
.container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 50px;
}
 

Ответ на первоначальный вопрос: найти

 <rect width="100%" height="100%" fill="777"/> 
 

и замените его на

 <rect width="100%" height="100%" fill="white"/>
 

Чтобы установить цвет кнопок в соответствии с комментарием

 button.carousel-control-prev,
button.carousel-control-next {
  background-color :white !important;
  color:black;
  opacity: 1;
}

.carousel-control-prev-icon {
   background-image: url("data:image/svg xml,");
}

.carousel-control-next-icon {
    background-image:url("data:image/svg xml,")
 }