Make lighter color of li on each for loop run

Question

How can I make lighter color in for loop? I tried to make lighter

and I must do int inline withoud sass.

<style>
li{
  background-color: #ffcc00;
  }
</style>

Now I have loop where i have

tag and i wat to make lighter background color in each foorm loop run. So my Each next emelent should be lighter. Can i do this inline? When i tried to use:

<li style="opacity: 0.1">

Then all my elements are lighter I need other element lighter then preview.

CSS:

<style>

  li{
  background-color: rgba(255, 204, 0,0.1);

  }
  li.lighter{
    li
  }

</style>

HTML:

 <div class="navbar-header animated">
              <ul>
                {% for elem in elements %}
                    <li>
                      <a href="/{{elem.page_type.symbol}}/{{elem.url}}">
                        {{elem.title}}
                      </a>
                    </li>
{% endfor%}
    </ul>
    </div>

Answer 1

try this..

background-color: rgba(255, 204, 0,0.1);

Example: (This is what you expected?)

<style>
    body { margin:0; padding:0; background:url(http://estaticos.elperiodico.com/resources/jpg/7/9/tierra-por-noche-conjunto-fotos-ensambladas-capturadas-por-satelite-estadounidense-suomi-npp-1354737837997.jpg) no-repeat left top; background-size:100%; }
    a { text-decoration:none; color:#fff; }
    ul { padding:0; }
    li { background-color: rgba(255, 204, 0,0.1); padding:10px; list-style:none; }
</style>

<div class="navbar-header animated">
  <ul>
    <li> <a href="#"> Light Background </a> </li>
  </ul>
</div>