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

この質問をチェックして、DavidThomasの答えを見てください。秘訣は、透明度をに適用すること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 に答える