Bootstrap旋轉木馬標題不透明

Question

我已經使用Twitter Bootstrap 2.3.2創建了一個圖像旋轉木馬，但是當在較小的屏蔽設備上調整瀏覽器/查看時，標題背景會使其不透明。

An example可以在引導程序網站上看到（嘗試將瀏覽器調整爲手機屏幕大小，將標題背景更改爲純色）。

這是什麼造成的？

這怎麼能被覆蓋？

Answer 1

當屏幕尺寸較小時，.carousel-caption元素的「位置」變爲「靜態」而非「絕對」，從而將標題置於圖像下。

上述情況給人的印象是，實際上不透明度已經改變。

在較小的屏幕上，如果.carousel-caption元素仍然位於實際輪播圖像的頂部，您幾乎無法看到圖像本身。

如果你喜歡，你可以通過將該元素改爲位置：絕對在樣式表中的較小屏幕上，但我建議讓它保持原樣。

像這樣的東西應該在你的樣式可能工作：

@media (max-width: 767px) { 

    .carousel-caption { 
     position: absolute; 
    } 
} 

Answer 2

你可以在你的CSS，其中0.35是不透明度調整不透明度。較高的號碼 - >較小的不透明度

.carousel-caption { 
    background: rgba(0, 0, 0, 0.35); 
} 

Answer 3

在引導4（測試版），有幾類可添加rounded corners的任何元素：

<img src="..." alt="..." class="rounded"> 
<img src="..." alt="..." class="rounded-top"> 
<img src="..." alt="..." class="rounded-right"> 
<img src="..." alt="..." class="rounded-bottom"> 
<img src="..." alt="..." class="rounded-left"> 
<img src="..." alt="..." class="rounded-circle"> 
<img src="..." alt="..." class="rounded-0">