如何设置引导轮播标题的样式？答案

【问题标题】：how to style bootstrap carousel-caption?如何设置引导轮播标题的样式？
【发布时间】：2014-04-10 21:50:22
【问题描述】：

如何设置引导轮播标题的样式，例如带有不透明度控制的渐变背景？？

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

好的，这是我正在处理的轮播。我想将轮播标题调整为类似这样的内容（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
    })
});

只控制时间间隔。引导程序 3。 2.jpg是显示的图片。谢谢你的帮助，对不起我的英语。

【问题讨论】：

Positioning and styling of Twitter Bootstrap Carousel Image Captions 的可能重复项
谢谢我很想知道渐变不透明度部分..
stackoverflow.com/questions/2293910/css3-transparency-gradient

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这里有一个简单的例子来说明你可以做什么。

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 以创建渐变。这是制作自己的一个好的开始。 cmets中@TheLittlePig提到的另一篇stackoverflow帖子也很有用。

【讨论】：