1

i wish to apply opacity to an li tag. I did so but then the opacity also got applied to the text and image inside that li. Following is my css code:

.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>

how do i do it?

z22
  • 10,013
  • 17
  • 70
  • 126
  • possible duplicate of [CSS: semi-transparent background, but not text](http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text) – vcsjones Dec 07 '12 at 14:16

2 Answers2

0

Check out this question and look at David Thomas answer. The trick is to apply the transparency to the background-color.

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

with your specific css you are going to want to use.

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}*/);

Here is a link to a fiddle

Community
  • 1
  • 1
Blake Plumb
  • 6,779
  • 3
  • 33
  • 54
  • thanks for the link but its for div. I want opacity for li. Is the same? – z22 Dec 07 '12 at 06:28
  • hey i tried rgbs but the bg doesnt get tranparent instead it gets more whitened. How do i solve it – z22 Dec 07 '12 at 07:12
  • here is my css: background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(15, 10, 10, 0.5)), to(rgba(15, 10, 10, 0.5)), color-stop(.8,#333333) ) !important; – z22 Dec 07 '12 at 07:13
  • @z22 What browser are you using? This approach will not work in all browsers. I have tested my code in ie9 and firefox 17.0.1 – Blake Plumb Dec 07 '12 at 16:17
0

I noticed you are using css gradients. You will need to use RGBA colors and use opacity for that. Here is another answer that might help you with doing this:

CSS3 Transparency + Gradient

and so you can get the RGBA for the color you are using, here is a color calculator.

http://hex2rgba.devoth.com/

Hope that helps!

Community
  • 1
  • 1
JCBiggar
  • 2,477
  • 3
  • 20
  • 33