Transparent ListView in Jquery

Question

I am very new to html and jquery. At that time i have a html file which contain a blue background image and a listview. I want to show transparent list view but its not showing transparent listview . From net i used so many ways but they are not working.

here is mine code:

<div id="main_bg">    
    <div  class="transbox">
        <ul data-role="listview"  id="sortedList" style="margin-top: 40px;"  >
            <li ><a href="#"><font color="blue"   size="5px;" >1</font></a></li>
            <li  style="margin-top:25px; " ><a href="#"><font color="blue"  size="5px;" >2</font></a></li>
            <li  style="margin-top: 25px; " ><a href="#"><font color="blue"  size="5px;" >3</font></a></li>
        </ul>
    </div>
</div>

here is css:

#sorter .ui-li.ui-li-static.ui-btn-up-c {
    height: 3.8%;
    padding: 0;
    font-size: 8px;
    padding-left: 5px;
    line-height: 1.8em;
}

#sortedList{
    padding-right: 40px;
}

Any help

Answer 1

Working example: http://jsfiddle.net/Gajotres/UnuJZ/

CSS:

#sortedList li {
    background-color: transparent !important;
    background-image: url('') !important;
}

Answer 2

I think you want something like this: http://jsfiddle.net/xDQpS/1/

One way for transparent backgrounds is using transparent colors:

.transbox {
    background-color: rgba(255,255,255,0.5);
}

Answer 3

I think that it does not work for jquery mobile version 1.4+

Does someone have hack for new version?

update of Gajotres solution for 1.4.1

#sortedList li {
    background-color: transparent !important;
    background-image: url('') !important;
}