如何使用Bootstrap的旋轉木馬組件改變圖像的不透明度但不覆蓋文本

Question

我使用Bootstrap v4創建包含帶有標題文本的圖像的旋轉木馬。我希望圖像變淡，但文字不受影響。我嘗試過各種非Bootstrap解決方案，但我無法獲得任何工作。請幫助:(

鏈接到開發網站; http://www.atlasestateagents.co.uk/mlb/

代碼：

<div id="home-page-carousel" class="carousel slide" data-ride="carousel"> 

    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#home-page-carousel" data-slide-to="0" class="active"></li> 
    <li data-target="#home-page-carousel" data-slide-to="1"></li> 
    </ol> 

    <!-- Content --> 
    <div class="carousel-inner" role="listbox"> 

    <!-- Slide 1 --> 
    <div class="carousel-item active"> <img src="<?php echo SITE_IMG . 'L1.jpg'; ?>" alt="Liverpool City Centre"> 
     <div class="carousel-caption"> 
     <h3>This is a title</h3> 
     <p>This is some text that is relevant to the title above</p> 
     </div> 
    </div> 

    <!-- Slide 2 --> 

    <div class="carousel-item"> <img src="<?php echo SITE_IMG . 'L1.jpg'; ?>" alt="Liverpool City Centre"> 
     <div class="carousel-caption"> 
     <h3>This is a title</h3> 
     <p>This is some text that is relevant to the title above</p> 
     </div> 
    </div> 
    </div> 

    <!-- Previous/Next controls --> 
    <a class="left carousel-control" href="#home-page-carousel" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#home-page-carousel" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

<!-- Center the image --> 
<style scoped> 
.carousel-item img{ 
    margin: 0 auto; 
} 
</style> 

Answer 1

基於此HTML

<div class="carousel-item"> <img src="<?php echo SITE_IMG . 'L1.jpg'; ?>" alt="Liverpool City Centre"> 
     <div class="carousel-caption"> 
     <h3>This is a title</h3> 
     <p>This is some text that is relevant to the title above</p> 
     </div> 
    </div> 
    </div> 

你問：

.carousel-item img { 
    opacity: /* whatever */ 
    } 

Answer 2

在我看來，你只需要減少圖像本身的不透明度：

.carousel-item img { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ 
    filter: alpha(opacity=50);           /* IE 5-7 */ 
    -moz-opacity: 0.5;             /* Netscape/Firefox */ 
    -khtml-opacity: 0.5;            /* Safari 1.x */ 
    opacity: 0.5;              /* Good browsers */ 
}