Question

是否可以在列表中使每个第二行背景变为50％透明？我有类似的东西：

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

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

Answer 1

您可以使用nth-child()选择器定位所有其他li。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

testMessage-1 testMessage-2 testMessage-3 testMessage-4 Number: 5392168 Equal: true Equal: false Equal: false Equal: false Equal: true Equal: false Equal: false Equal: false Equal: true将每隔2 li:nth-child(2n)选择一次。

＆＃13;

li

＆＃13;

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

＆＃13;

Answer 3

定位每个可以使用nth选择器

的元素

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

仅在图像的一部分上添加透明度 - 以奇数行为单位

3 个答案: