1

我希望将不透明度应用于 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>

我该怎么做？

4

2 回答 2

0

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

CSS3 透明度 + 渐变

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

http://hex2rgba.devoth.com/

希望有帮助！

于 2012-12-07T06:29:23.530 回答
0

看看这个问题，看看大卫托马斯的回答。诀窍是将透明度应用于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}*/);

这是小提琴的链接

于 2012-12-07T06:18:51.337 回答