如何在cycle2 cycle-overlay中更改字体颜色

Question

我在我的网站上使用Clycle2图像滑块。我想在循环覆盖中改变样式。我可以改变字体大小。但是通过使用CSS，我不能改变字体颜色。它总是给我灰色的颜色。请帮我弄一下这个。

#us-img-container{
    margin: 0px;
    padding: 0px;
    cursor: pointer;
}
#us-container{
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    background: #fff;
}
#us-slideshow{
    width: 100%;
}
#us-slideshow img{
    width: 100%;
}
#us-pager{
    height: 70px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    opacity: 0;
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
#us-slideshow:hover + #us-pager{
    opacity: 1;
}
#us-pager:hover {
    opacity: 1;
}
#us-prev{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 15px;
    z-index: 1000;
    opacity: 0.6;
    cursor: pointer;
}
#us-next{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 10px;
    z-index: 1000;
    opacity: 0.6;
    cursor: pointer;
}
#us-pager img{
    height: 60px;
    width: 95px;
    margin: 5px 5px;
    opacity: 0.5;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
#us-pager img:hover{
    opacity: 1;
    transform: scale(1.05);
    z-index: 100;
}




/* overlay */
.cycle-overlay { 
    font-family: NotoSans-Regular !important;
    position: absolute;
    bottom: 0; 
    width: 100%;
    height: 40px;
    z-index: 600;
    padding: 7px 7px 7px 10px;
    background-color: rgba(0, 0, 0, 0.1) !important;
    font-size: 16px;
    color: rgba(255, 255, 255,1) !important;
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}


.cycle-slideshow:hover .cycle-overlay{
    bottom: 70px !important; 
}


/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .cycle-slideshow { width: 200px;}
    .cycle-overlay { padding: 4px }
    .cycle-caption { bottom: 4px; right: 4px }
}

<div class="col-md-12 col-sm-12 col-xs-12 hide" id="us-img-container">
    <div id="us-container" style="">
        <div id="us-slideshow" class="cycle-slideshow" 
             data-cycle-fx = "fade" 
             data-cycle-speed = "600" 
             data-cycle-timeout = "3000" 
             data-cycle-pager = "#us-pager"
             data-cycle-pager-template = "<a herf= '#'><img src='{{src}}' height= 100 width=150 />"
             data-cycle-next = "#us-next"
             data-cycle-prev = "#us-prev"
             data-cycle-manual-fx = "scrollHorz"
             data-cycle-manual-speed = "400" 
             data-cycle-pager-fx = "fade"

             data-cycle-caption-plugin=caption2
             data-cycle-overlay-fx-out="slideUp"
             accesskey=""data-cycle-overlay-fx-in="fadeOut"
             >
                 <?php
                 $x = 1;
                 while ($x < 8) {
                     ?>

                <script>
                    $.ajax({
                        url: '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg', //or your url
                        success: function (data) {
                            document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg';
                        },
                        error: function (data) {
                            document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_DEFAULT; ?>';
                        }
                    });
                </script>
                <img src="" id="slider_<?php echo $x; ?>" onclick="goToDownloads(<?php echo $slider_json[$x]['dn_id']; ?>)"
                     data-cycle-desc="<?php echo $recent_json[$x]['dn_title']; ?> - <?php echo $slider_json[$x]['artist_name']; ?>" >
                <div class="cycle-overlay"   style="color: red; "></div>

                <?php
                $x++;
            }
            ?>

        </div>
        <div id="us-pager"></div>
        <div id="us-prev"><i class="fa fa-angle-left" aria-hidden="true" style="font-size: 26px; color: #000;"></i></div>
        <div id="us-next"><i class="fa fa-angle-right" aria-hidden="true" style="font-size: 26px; float: right; color: #000;"></i></div>
    </div>
</div>

Answer 1

我想，我已经找到解决方案了。我已经在下面的CSS中对其进行了注释。

.cycle-overlay {
    font-family: NotoSans-Regular !important;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    z-index: 600;
    padding: 7px 7px 7px 10px;
    background-color: rgba(0, 0, 0, 0.1) !important;
    font-size: 16px;
    color: rgba(255, 255, 255,1) !important;  /* <-- remove !important */
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

您还可以将下面这一行添加到代码中：

.cycle-overlay {
    color: red !important;
}