如何設置自舉輪播字幕的樣式？

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帖子也非常有用。