在透明 div 之上使子 div 不透明 [重复]答案

【问题标题】：Making a child div non-transparent on top of the transparent div [duplicate]在透明 div 之上使子 div 不透明 [重复]
【发布时间】：2021-09-28 06:25:01
【问题描述】：

下面的 html 来自 WordPress 插件呈现的滑块。我需要使“阅读更多”按钮不透明。你能帮忙做吗？我试图增加同样的不透明度，但没有帮助。

<!-- ROW 0 -->
<div class="front-page-row bg-tan-light" id="row0">
<div class="wrap-x">
<div class="inside mini">
<article class="body-area mt2x">
<div class="wpsisac-slick-slider-wrp wpsisac-clearfix " data-conf="{&quot;dots&quot;:&quot;true&quot;,&quot;arrows&quot;:&quot;false&quot;,&quot;autoplay&quot;:&quot;true&quot;,&quot;autoplay_interval&quot;:&quot;50000&quot;,&quot;fade&quot;:&quot;false&quot;,&quot;lazyload&quot;:&quot;&quot;,&quot;speed&quot;:&quot;200&quot;,&quot;rtl&quot;:&quot;false&quot;,&quot;loop&quot;:&quot;true&quot;,&quot;hover_pause&quot;:&quot;true&quot;}">
<div id="wpsisac-slick-slider-1" class="wpsisac-slick-init wpsisac-slick-slider design-3 wpsisac-image-fit">
<div class="wpsisac-image-slide">
<div class="wpsisac-slide-wrap" style='height:400px;'>  
<img  src="http://pwp-wordpress/wp-content/uploads/2021/09/Holiday_Catalogue.jpg" alt="Holiday Catalog" />
<div class="wpsisac-slider-content">
<div class="wpsisac-bg-overlay wp-medium-6 wpcolumns">
<h2 class="wpsisac-slide-title">Holiday Catalog</h2>
<div class="wpsisac-slider-short-content"><p>View our 2021 Holiday Gift Brochure</p>
</div>
<div class="wpsisac-readmore"><a href="https://packedwithpurpose.gifts/how-to-order/gift-catalogue/" class="wpsisac-slider-readmore">Read More</a></div>
</div>
</div>
</div>
</div><div class="wpsisac-image-slide">
<div class="wpsisac-slide-wrap" style='height:400px;'>  
<img  src="http://pwp-wordpress/wp-content/uploads/2020/07/full-width-image1.jpg" alt="Test Slide 3" />
<div class="wpsisac-slider-content">
<div class="wpsisac-bg-overlay wp-medium-6 wpcolumns">
<h2 class="wpsisac-slide-title">Test Slide 3</h2>
<div class="wpsisac-slider-short-content"><p><strong>Rainforest preservation, clean water access, landfill waste reduction and sustainable agricultural practices.</strong></p>
</div>
<div class="wpsisac-readmore"><a href="https://www.wponlinesupport.com" class="wpsisac-slider-readmore">Read More</a></div>
</div>
</div>
</div>
</div>          </div>
</div>
</article>
</div>
</div>
</div><!-- ROW 0 -->

【问题讨论】：

完美，有效。请将您的评论转换为我会接受的答案。

标签： html css frontend

【解决方案1】：

不要使用元素的不透明度。您是否尝试过使用背景不透明度？

background: rgba(255,255,255,0.3)

【讨论】：