Question

我无法在透明div上设置非透明字体。

我将{strong> 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

基本上您需要做的就是将图像和标题文本包装在一个元素中，然后浮动包装它们的元素或将其设置为内联块，以使其符合图像的形状。然后将其设置为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

透明div上的非透明字体

2 个答案: