如何设置自举轮播字幕的样式？

Question

如何设置带有不透明度控制的渐变背景的自举轮播字幕？

浏览器渲染看起来是这样的

好的，这是我正在处理的轮播。 我想将轮播字幕调整为此类（Photoshop渲染的图像）

我很想在不透明度上加入一些渐变，以使其完美融合。 小插图也比较可取。 我以前从未做过这种事。

这是我的代码。 除了引导默认样式外，我没有做任何样式。

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
    <div class="item active">
    <img src="2.jpg" alt="img-responsive">
        <div class="carousel-caption">
            <h2>The worst of me suceeded by the best of You </h2>
        </div>          
    </div>
</div>

和JavaScript

$(document).ready(function(){
    $('.carousel').carousel({
        interval:3000
    })
});

只是控制时间间隔。 bootstrap 3. 2.jpg是显示的图片。 感谢您的帮助，对不起我的英语。

Answer 1

这是一个小提琴，提供了您可以做什么的快速示例。

小提琴

为Webkit（Chrome）制作渐变的CSS看起来像这样

background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));

如果您在计算CSS时遇到麻烦，请查看此页面以创建渐变。 这是制作自己的好起点。 @TheLittlePig在评论中提到的另一个stackoverflow帖子也非常有用。