javascript - 如何设置 bootstrap carousel-caption 的样式？

Question

如何使用不透明度控制将 bootstrap carousel-caption 设置为像渐变背景一样的样式？

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

好的，这就是我正在处理的旋转木马。我想将 carousel-caption 调整为这样的东西(photoshop 渲染图像)

我希望有一些不透明的渐变，以完美融合。小插图也更可取。我以前从未这样做过。

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

<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

这是一个 fiddle ，其中包含您可以执行的操作的快速示例。

Fiddle

为 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 时遇到问题，请查看 this page用于创建渐变。这是您自己制作的良好开端。 @TheLittlePig 在评论中提到的另一篇 stackoverflow 帖子也很有用。