Question

所以我在尝试更改旋转木马的背景颜色方面遇到了麻烦。无论我做什么，似乎背景总是白色的。我使用https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h的代码作为我的轮播。

<div class="container" id="slides">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://photos-3.dropbox.com/t/2/AADPmL6gjWHr1iYlah93suqa28cVuGlQ32aryhnqDI5JzA/12/611886439/jpeg/32x32/1/_/1/2/ConnectK%20carousel.jpg/ELbFkPkEGO0BIAIoAg/3oq_ZcBwruMHDZh7EsNU5B8UTbQE8n0KIgLWHmtklMQ?size=1280x960&size_mode=3" alt="Connect K project" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://photos-4.dropbox.com/t/2/AADn_i5Z_NwIjiBSH8pnZB7nPAYz-tmRqxlDtEMGsRfOww/12/611886439/jpeg/32x32/1/_/1/2/DigitalBraille.jpg/ELbFkPkEGO0BIAIoAg/TzOhuN9b1r5yKEmQ43BWI7NkmaaSwdLR0ikRW4DnaXc?size=1280x960&size_mode=3" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://photos-4.dropbox.com/t/2/AADJdh6q_qeKgWjhsL07M2NQH81JFg8Mx51O7G60oeRlGw/12/611886439/jpeg/32x32/1/_/1/2/MedAppJam.JPG/ELbFkPkEGPMBIAIoAg/aQ1lqISwGTPXaGi6jgbJoeMmDcQUtcKoIyWTrZADmPI?size=1280x960&size_mode=3" alt="MedAppJam project" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

我尝试过使用CSS样式来改变背景，但出于某种原因，它似乎并不起作用。而且我不确定为什么。这是我为尝试更改背景颜色而添加的CSS。

#slides{
  color: grey;
  background-color: grey !important;
}

.carousel{
  color: grey;
  background-color: grey !important;
}
.carousel .item{
  color: grey;
  background-color: grey;
}

https://codepen.io/chukt/pen/wqQqyL?editors=1100#0这是我完整代码的链接。对不起所有奇怪的颜色。我只是乱搞它。无论如何，我还检查了像change twitter bootstrap carousel background?这样的其他问题，但它似乎没有用。任何人都可以向我解释这个吗？

Answer 1

您目前遇到的问题是轮播已应用容器类，因此会为元素添加固定宽度。你看到的任何一面的白色实际上是身体的背景颜色。

有两种解决方法（我缩短了示例的代码）：

全宽

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:ListBucket"],
      "Resource": ["arn:aws:s3:::BUCKET_NAME"]
    },
    {
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": ["arn:aws:s3:::BUCKET_NAME/*"]
    }
  ]
}

图片宽度（显示灰色背景）

<!-- Remove the container class from the slides div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->

        <!-- Left and right controls -->

    </div>
</div>

我已将您的codepen分为一个示例：https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0

Answer 2

这似乎更简单（对我来说有效）（使用bootstrap 4）

#pwb-carousel-bg { background-color: grey; } 像往常一样使用CSS ...

:authority: dev-xssqpfdr.auth0.com
:method: POST
:path: /samlp/z76124e23wGhWOCp0HLCa3pR2Bs5BmYyj
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
content-length: 5389
content-type: application/x-www-form-urlencoded
cookie: auth0=s%3AfyaKW_M79aXfsB_RXakNH7zrwZGr-J04.icMGIxicIaBxhWfscSvmd4aSK33piQWDkaenfv2wgWO4
origin: https://devbank-invistacompi.cs79.force.com
pragma: no-cache
referer: https://devbank-cs79.force.com/
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Answer 3

仅使用css文件中的现有类“ carousel-inner”，如下所示，例如，将背景颜色更改为black：

.carousel-inner {
background-color: black !important;
}

Answer 4

    <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background:none;">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next" style="background:none;">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>

如何更改Bootstrap的carousel插件的背景颜色？

4 个答案: