仅在图像的一部分上添加透明度 - 在奇数行中答案

【问题标题】：Add transparency only on a part of image - in odd rows仅在图像的一部分上添加透明度 - 在奇数行中
【发布时间】：2017-06-09 21:20:03
【问题描述】：

是否可以使列表中每隔一行的背景透明 50%？我有类似的东西：

<div style="backgroung-image: url('bg.png')">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>

然后我想在第二行有一个部分白色的行，但仍然想看到背景图像。

【问题讨论】：

标签： javascript jquery html css html-lists

【解决方案1】：

您可以使用nth-child() 选择器来定位每隔一个li。

对于奇数行，提供odd 或2n+1 作为参数。
对于偶数行，提供even 或2n 作为参数。

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  background-image: url('https://unsplash.it/1200x100?image=75');
}

li {
  color: white;
}

li:nth-child(odd) {
  background-color: rgba( 255, 255, 255, 0.5 );
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>

【讨论】：

【解决方案2】：

li:nth-child(2n) 将选择每第二个li。

li:nth-child(2n) {
  opacity:0.5;
}

<div style="backgroung-image: url('bg.png')">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>

【讨论】：

【解决方案3】：

你可以使用nth选择器来定位每隔一个元素

li:nth-child(2n) {
background: red;
opacity: 0.5;
}

【讨论】：