Непрозрачность фона

Есть ли способ сохранить фон элемента незатронутым непрозрачностью?

т.е. У меня есть аккордеон jquery, который при нажатии/наведении на содержимое определенного элемента (li) непрозрачности изменяется, заставляя вас видеть другие элементы ниже.

Я подумал, могу ли я изменить это, чтобы у каждого элемента списка был сплошной белый фон, который не исчезает?

Некоторый код:

<div id="accord_container"><div id="accord">
<ul>
  <li><a id="a1"><img src="img/accord/1.jpg" /></a></li>
  <li><a id="a2"><img src="img/accord/3.jpg" /></a></li>
  <li><a id="a3"><img src="img/accord/7.jpg" /></a></li>
  <li><a id="a4"><img src="img/accord/8.jpg" /></a></li>
</ul>
</div></div>

#accord_container{width:930px; margin:0px auto;}
#accord{height:480px; overflow:hidden; margin:5px; position:relative; cursor:pointer;}
#accord ul{position:relative; list-style:none; margin:0; padding:0;}
#accord ul li{float:left; display:block; margin-right:0px; background-color:#FFF;}
#accord ul li a{display:block; overflow:hidden; height:480px; width:72px; opacity:0.75; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter:alpha(opacity=75);}
#accord ul li img{position:absolute;}
#a1{width:700px; opacity:1.0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100);}

$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 700;
    minWidth = 72;

    $("#accord ul li a").click(
      function(){
    if(lastBlock.id == this.id || (lastBlock.id == undefined && this.id == "a1")){
    if(this.rel){
        window.location=this.rel;
        }
    }else{
        $(lastBlock).animate({width: minWidth+"px", opacity: 0.75}, { queue:false, duration:400});
    $(this).animate({width: maxWidth+"px", opacity: 1.0}, { queue:false, duration:400});
    lastBlock = this;
    }
  }
);
$("#a1").animate({width: maxWidth+"px", opacity: 1.0}, { queue:false, duration:400});

});


person Badplayer    schedule 10.08.2011    source источник
comment
У вас есть код, который мы могли бы посмотреть?   -  person Joseph Marikle    schedule 10.08.2011


Ответы (1)


Вам просто нужно будет обернуть содержимое. Итак, если у вас есть следующая структура (просто пример):

<div class="hasBackground">
    <div class="theContent">

    </div>
</div>

Затем вы можете установить непрозрачность внутреннего div, не затрагивая внешний div, у которого есть фон.

person James Montagne    schedule 10.08.2011