Question

我想知道是否有人可以通过css和html代码帮助我更改标题1和标题3的字体颜色。我已附上该页面的屏幕截图。目前它是带有阴影的白色，但是，我只是想要没有阴影的黑色。此刻，因为字体是白色的，所以我看不到米歇尔·林德曼的魔法故事。我已经附上了该页面的屏幕截图，并复制了当前的编码。我希望这有帮助。非常感谢，我很感激。米歇尔xx

.carousel-caption {
    position: absolute;
    transform: translateY(-50%);
    top: 60%;
}


.carousel-caption h1 {
    font-size: 4.5rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .1rem black;

}

.carousel-caption h3 {
    font-size: 2rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .6rem black;
    padding-bottom: 1rem;
}

.btn {
    font-weight: 500;
    border-width: medium;

<div class="carousel-inner">
                 <div class="carousel-item active">
                     <img src="img/meheaderwordstwo.png">
                     <div class="carousel-caption text-left">
                         <h1 class="display-2"></h1>Michelle Lindemann's Magical Stories</h1>
                         <h3>Bringing your dreams to life!</h3>
                         <a href="#" class="btn btn-outline-dark btn-sm">DISCOVER MORE</a>


                     </div>

谢谢

Answer 1

您可以简单地将color: black;添加到.carousel-caption h3部分。截至目前，您的代码应该已经在执行此操作，但是我假设您是在询问此问题，因为事实并非如此。尝试将!important;添加到颜色中，这可能会因为其他因素影响文本颜色而起作用。看看我在这里做了什么：（本例中为蓝色。您可以将其更改为黑色）。

.carousel-caption {
    position: absolute;
    transform: translateY(-50%);
    top: 60%;
}


.carousel-caption h1 {
    font-size: 4.5rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .1rem black;
   

}

.carousel-caption h3 {
    font-size: 2rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .6rem black;
    padding-bottom: 1rem;
     color: blue !important;
}

.btn {
    font-weight: 500;
    border-width: medium;

<div class="carousel-inner">
                 <div class="carousel-item active">
                     <img src="img/meheaderwordstwo.png">
                     <div class="carousel-caption text-left">
                         <h1 class="display-2"></h1>Michelle Lindemann's Magical Stories</h1>
                         <h3>Bringing your dreams to life!</h3>
                         <a href="#" class="btn btn-outline-dark btn-sm">DISCOVER MORE</a>


                     </div>

Answer 2

要更改字体的颜色，请在css中使用color:选项。

示例：

.carousel-caption h1 {
    font-size: 4.5rem;
    text-transform: uppercase;

    color: black;
}

.carousel-caption h3 {
    font-size: 2rem;
    text-transform: uppercase;
    padding-bottom: 1rem;

    color: black;
}

更改字体颜色

2 个答案: