css 中的不透明度仅对 li 而不是里面的文本

Question

我希望对 li 标签应用不透明度。我这样做了，但随后不透明度也应用于该 li 内的文本和图像。以下是我的css代码：

.ui-btn-up-d {
border: 1px solid #2E1C1C /*{d-bup-border}*/;
background: #F8EAEA /*{d-bup-background-color}*/;
font-weight: bold;
color: #BDACAC /*{d-bup-color}*/;
text-shadow: 0 /*{d-bup-shadow-x}*/ 0 /*{d-bup-shadow-y}*/ 0 /*{d-bup-shadow-radius}*/ white /*{d-bup-shadow-color}*/ !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #FAFAFA), to( #F6F6F6 /*{d-bup-background-end}*/));
opacity: 0.7;
background-image: -webkit-linear-gradient( #1D1616 /*{d-bup-background-start}*/, #292525 /*{d-bup-background-end}*/) !important;
background-image: -moz-linear-gradient( #FAFAFA /*{d-bup-background-start}*/, #F6F6F6 /*{d-bup-background-end}*/);
background-image: -ms-linear-gradient( #FAFAFA /*{d-bup-background-start}*/, #F6F6F6 /*{d-bup-background-end}*/);
background-image: -o-linear-gradient( #FAFAFA /*{d-bup-background-start}*/, #F6F6F6 /*{d-bup-background-end}*/);
background-image: linear-gradient( #FAFAFA /*{d-bup-background-start}*/, #F6F6F6 /*{d-bup-background-end}*/);

}

html:

    <li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-d">
    <div class="ui-btn-inner ui-li">
    <div class="ui-btn-text"> <a href="#event/event_id:131" id="event_131" class="ui-link-inherit"> <img class="load_image ui-li-thumb" height="80" width="80" src="img.jpg"> 
<h3 class="ui-li-heading">fghf</h3>
<p class="event_date ui-li-desc">05-12-2018 at 07:54 AM</p>
</a> </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>

我该怎么做？

Answer 1

查看此question 并查看 David Thomas 的答案。诀窍是将透明度应用于background-color。

background: #F8EAEA; /* for browsers that don't understand the following rgba rule */
background-color: rgba(248,234,234,0.7);

使用您要使用的特定 css。

border: 1px solid #2E1C1C /*{d-bup-border}*/;
background: #F8EAEA; /* for browsers that don't understand the following rgba rule */
background-color: rgba(248,234,234,0.7);
font-weight: bold;
color: #BDACAC /*{d-bup-color}*/;
text-shadow: 0 /*{d-bup-shadow-x}*/ 0 /*{d-bup-shadow-y}*/ 0 /*{d-bup-shadow-radius}*/ white /*{d-bup-shadow-color}*/ !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( rgba(248,234,234,0.7)), to(rgba(246,246,246,0.7) /*{d-bup-background-end}*/));
background-image: -webkit-linear-gradient(rgba(29,22,22,0.7) /*{d-bup-background-start}*/, rgba(41,37,37,0.7)/*{d-bup-background-end}*/) !important;
background-image: -moz-linear-gradient(rgba(250,250,250,0.7) /*{d-bup-background-start}*/, rgba(246,246,246,0.7) /*{d-bup-background-end}*/);
background-image: -ms-linear-gradient( rgba(250,250,250,0.7) /*{d-bup-background-start}*/, rgba(246,246,246,0.7) /*{d-bup-background-end}*/);
background-image: -o-linear-gradient( rgba(250,250,250,0.7) /*{d-bup-background-start}*/, rgba(246,246,246,0.7) /*{d-bup-background-end}*/);
background-image: linear-gradient( rgba(250,250,250,0.7) /*{d-bup-background-start}*/, rgba(246,246,246,0.7) /*{d-bup-background-end}*/); 

这是fiddle的链接

Answer 2

我注意到您正在使用 css 渐变。您将需要使用 RGBA 颜色并为此使用不透明度。这是另一个可能对您有所帮助的答案：

CSS3 Transparency + Gradient

所以你可以得到你正在使用的颜色的 RGBA，这里有一个颜色计算器。

http://hex2rgba.devoth.com/

希望有帮助！