透明div上的不透明字體

Question

我無法在透明div上設置非透明字體。

我用這個CSS爲h3，但它不工作。

.posterTextContainer { 
    position: absolute; 
    width: 100%; 
    background-color: orange; 
    left: 0; 
    bottom: 0; 
    z-index: 5; 
    text-align: center; 
    display: block; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter: alpha(opacity=70); 
    opacity: 0.7 !important; 
    -moz-opacity: 0.7; 
    -khtml-opacity: 0.7; 
} 

    .posterTextContainer > h3 { 
     font-weight: bold; 
     color: white !important; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"!important; 
     filter: alpha(opacity=100)!important; 
     opacity: 1.0 !important; 
     -moz-opacity: 1.0 !important; 
     -khtml-opacity: 1.0 !important; 
     text-transform: uppercase; 
     margin: 0.4em 0.7em 0.5em 0.7em !important; 
     white-space: nowrap; 
     overflow: hidden !important; 
     text-overflow: ellipsis; 
    } 

HTML

<div id="premieresList" class="owl-carousel owl-theme classPremieres" style="display:block; width:100%!important; height:auto!important;"> 
      @if (ViewBag.Premieres != null) 
      { 
       foreach (var item in (List<.FilmView>)ViewBag.Premieres) 
       { 
        <div class="item" style="width:100%!important;"> 
         <img class="owl-lazy" data-src="@item.FileUrl" alt="" style="border: 1px solid hsla(30, 96%, 52%, 0.6);" /> 
         <div class="posterTextContainer"> 
          <h3> 
           @item.Title.ToUpper() 
          </h3> 
         </div> 
        </div> 
       } 
      } 
     </div> 

請幫助我。謝謝！

Answer 1

基本上所有你需要做的是包裝你的圖片和標題文本中的一個元素，而無論是浮空包裝它們的元素或將其設置爲inline-block的，這樣它會符合圖像的形狀。然後將其設置爲position: relative，將標題設置爲position: absolute，然後使用rgba()（使用Alpha透明度）作爲標題的背景顏色。

.posterTextContainer { 
 
    display: inline-block; 
 
    position: relative; 
 
    background: orange; 
 
    padding: 2px; 
 
} 
 

 
.posterTextContainer > h3 { 
 
    font-weight: bold; 
 
    color: white !important; 
 
    text-transform: uppercase; 
 
    margin: 0; 
 
    white-space: nowrap; 
 
    overflow: hidden !important; 
 
    text-overflow: ellipsis; 
 
    background: rgba(255,165,0,0.5); 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; right: 0; 
 
    text-align: center; 
 
    padding: .5em 0; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    display: block; 
 
}

<div class="posterTextContainer"> 
 
    <img src="https://pmcvariety.files.wordpress.com/2016/06/inferno-movie-tom-hanks.jpg?w=1000&h=563&crop=1"> 
 
    <h3>text</h3> 
 
</div>

Answer 2

變化opacity:1.0喜歡的東西opacity:0.6