无法使用 BootStrap4 更改轮播标题上的背景颜色

Question

I'm stuck trying to change the background color of a simple carousel-caption.我一直在尝试更改简单轮播字幕的背景颜色。

When I check in the debugger I see the warning "Invalid property value" but I can't figure out why.当我检查调试器时，我看到警告“无效的属性值”，但我不知道为什么。

I'm wondering whether I missed something.我想知道我是否错过了什么。 I don't get why the property background with an rgba color would be invalid in a carousel-caption.我不明白为什么带有 rgba 颜色的属性背景在轮播标题中无效。

I've tried placing this property in the carousel-item but I got the same result.我试过将此属性放在 carousel-item 中，但得到了相同的结果。

Here's a link to the code on JsFiddle https://jsfiddle.net/qragpevL/这是 JsFiddle https://jsfiddle.net/qragpevL/ 上代码的链接

 .html{ font-family: Poppins; } .carousel-item{ height: 80vh; min-height: 300px; background: no-repeat center scroll; background-size: cover; } .carousel-caption{ margin-top: 20%; margin-bottom: 20%; background: rgba(black, black, black, 0.8); } .carousel-caption h5{ font-size: 45px; text-transform: uppercase; letter-spacing: 2px; margin-top: 25px; color:black; } .carousel-caption p{ width: 75%; margin: auto; font-size: 18px; line-height: 1.9; color:black; } .navbar-light .navbar-brand{ color:black; font-size: 25px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; } .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: black; } .navbar-light .navbar-nav .nav-link{ color: black; } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{ color: black; }

 <!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>My SportTeam</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Slider One Item</h5> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, aut?</p> </div> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Slider Two Item</h5> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, aut?</p> </div> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Slider Three Item</h5> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, aut?</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>

Answer 1

Because you are providing invalid values for the rgba colour scheme.因为您为 rgba 配色方案提供了无效值。 Having rgba(black,black, black, 0.8);有rgba(black,black, black, 0.8); won't really work.不会真的起作用。 Try setting it as: rgba(0, 0, 0);尝试将其设置为： rgba(0, 0, 0); if you want it black.如果你想要黑色。

Here's a link to a css color picker tool, provided by Mozilla.这是Mozilla 提供的css 颜色选择器工具的链接。

无法使用 BootStrap4 更改轮播标题上的背景颜色

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-07 23:26:00

无法使用 BootStrap4 更改轮播标题上的背景颜色

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-07 23:26:00

解决方案1
1 已采纳 2020-02-07 23:26:00