背景不透明度

Question

ウェブアプリケーションではcarouselを使用しています。

明らかに私はカルーセルの画像をシャッフルしていますが、テキストはユーザーにとって読みにくいものになります。

テキストを含むテキストを背景色にして中不透明度を与えることができると考えましたが、テキスト自体も透明になります。

私はこの問題を解決するためにこのreferenceを使用しましたが、問題は修正されません。このソリューションでは、背景が透明にならず、画像の四分の一がカットされません。ここで

は私CSHTMLです：

<div class="carousel-caption"> 
    <h1>Another example headline.</h1> 
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
</div> 

CSS：

.carousel-caption { 
    background-color: rgba(222,222,222,.5); 
    border: 2px solid rgba(222,222,222,.5); 
} 

だから、明確にするために...どのように私は、テキストが不透明続けるが、それはそのようdiv透明の背景ありません私のイメージの一部を切り取っていないのですか？

Answer 1

私は自分の持っているものに何が間違っているのか分かりません。不透明度なしでフォントをスタイルするだけですか？

.carousel-caption { 
    background-color: rgba(100,222,300,.2); 
    border: 2px solid rgba(100,200,300,.2); 
} 
.carousel-caption p, .carousel-caption h1{ 
    color: blue; 
} 

JSFiddle